做二手车的网站有哪些,中山vi设计公司,建设一个会员积分网站,简单网站如何制作jsonp-反向代理-CORS解决JS跨域问题的个人总结 网上说了很多很多#xff0c;但是看完之后还是很混乱#xff0c;所以我自己重新总结一下。解决 js 跨域问题一共有8种方法#xff0c; jsonp#xff08;只支持 get#xff09;反向代理CORSdocument.domain iframe 跨域windo… jsonp-反向代理-CORS解决JS跨域问题的个人总结 网上说了很多很多但是看完之后还是很混乱所以我自己重新总结一下。 解决 js 跨域问题一共有8种方法 jsonp只支持 get反向代理CORSdocument.domain iframe 跨域window.name iframe 跨域window.postMessagelocation.hash iframeweb sockets各个方法都有各自的优缺点但是目前前端开发方面比较常用的是 jsonp反向代理CORS CORS是跨源资源分享Cross-Origin Resource Sharing的缩写。它是W3C标准是跨源AJAX请求的根本解决方法。优点是正统符合标准缺点是 但是需要服务器端配合比较麻烦。 JSONP 优点是对旧式浏览器支持较好缺点是 但是只支持 get 请求。有安全问题(请求代码中可能存在安全隐患)。要确定jsonp请求是否失败并不容易 反向代理都能够兼容以上的确定但是仅仅作为前端开发模式的时候使用在正式上线环境较少用到。 因为开发环境的域名跟线上环境不一样才需要这样处理。如果线上环境太复杂本身也是多域后面说到的同源策略问题多子域或者多端口问题那么需要采用 jsonp 或者 CORS 来处理。这里主要说明这三种方式。其他方式暂不说明。 一、什么是跨域问题 跨域问题一般只出现在前端开发中使用 javascript 进行网络请求的时候浏览器为了安全访问网络请求的数据而进行的限制。 提示的错误大致如下 No Access-Control-Allow-Origin header is present on the requested resource. Origin http://XXXXXX is therefore not allowed access. 二、为什么会出现跨域问题 因为浏览器收到同源策略的限制当前域名的js只能读取同域下的窗口属性。 2.1 同源策略 同源指的是三个源头同时相同 协议相同域名相同端口相同举例来说http://www.example.com/dir/page.html这个网址 协议是 http://
域名是 www.example.com
端口是80 //它的同源情况如下
http://www.example.com/dir2/other.html同源
http://example.com/dir/other.html不同源域名不同
http://v2.www.example.com/dir/other.html不同源域名不同
http://www.example.com:81/dir/other.html不同源端口不同 同源策略限制了以下行为 Cookie、LocalStorage 和 IndexDB 无法读取DOM 和 JS 对象无法获取Ajax请求发送不出去大概可以知道跨域其实就是同源策略导致的并且知道同源策略的原理。 详细的同源策略相关可以参考http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html 三、解决跨域问题 3.1 反向代理方式 反向代理和正向代理的区别 正向代理Forward Proxy通常都被简称为代理就是在用户无法正常访问外部资源比方说受到GFW的影响无法访问twitter的时候我们可以通过代理的方式让用户绕过防火墙从而连接到目标网络或者服务。反向代理Reverse Proxy是指以代理服务器来接受 Internet 上的连接请求然后将请求转发给内部网络上的服务器并将从服务器上得到的结果返回给 Internet 请求连接的客户端此时代理服务器对外就表现为一个服务器。那么我们可以理解为反向代理 如何使用反向代理服务器来达到跨域问题解决 前端ajax请求的是本地反向代理服务器 本地反向代理服务器接收到后 修改请求的 http-header 信息例如 refererhost端口等修改后将请求发送到实际的服务器实际的服务器会以为是同源参考同源策略的请求而作出处理现在前端开发一般使用 nodejs来做本地反向代理服务器 // 在 express 之后引入路由
var app express();var apiRoutes express.Router();app.use(bodyParser.urlencoded({extended:false}))// 自定义 api 路由
apiRoutes.get(/lyric, function (req, res) {var url https://c.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg;axios.get(url, {headers: { // 修改 headerreferer: https://c.y.qq.com/,host: c.y.qq.com},params: req.query}).then((response) {var ret response.dataif (typeof ret string) {var reg /^\w\(({[^()]})\)$/;var matches ret.match(reg);if (matches) {ret JSON.parse(matches[1])}}res.json(ret)}).catch((e) {console.log(e)})
});// 使用这个路由
app.use(/api, apiRoutes); 3.2 JSONP 方式 JSONP有些文章会叫动态创建script因为他确实是动态写入 script 标签的内容从而达到跨域的效果 AJAX 无法跨域是受到“同源政策”的限制但是带有src属性的标签例如script、img、iframe是不受该政策限制的因此我们可以通过向页面中动态添加script标签来完成对跨域资源的访问这也是 JSONP 方案最核心的原理换句话理解就是利用了【前端请求静态资源的时候不存在跨域问题】这个思路。JSONPJSON with Padding是数据格式JSON的一种“使用模式”。JSONP 只能用 get 方式。实现 jsonp 的方式 引用来自https://segmentfault.com/a/1190000012469713的图 客户端和服务器端约定一个参数名是代表 jsonp 请求的例如约定 callback 这个参数名。然后服务器端准备好针对之前约定的 callback 参数请求的 javascript 文件这个文件里面要有一个函数名要跟客户端请求的时候的函数名要保持一致。如下面例子ip.js然后客户端注册一个本地运行的函数,并且函数的名字要跟去请求服务器进行 callback 回调的函数的名字要一致。如下面例子foo 函数跟请求时候callbackfoo的名字是一致的然后客户端对服务器端进行 jsonp 的方式请求。服务器端返回刚才配置好的js 文件ip.js到客户端 客户端浏览器解析script标签并执行返回的javascript文件此时数据作为参数传入到了客户端预先定义好的 callback 函数里。 相当于本地执行注册好foo 函数然后获取了一个foo 函数并且这个获取的 foo 函数里面包含了传入的参数例如 foo({XXXXX})这是一个实例 demo 服务器端文件ip.js foo({ip: 8.8.8.8
}); 客户端文件 jsonp.html !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlnshttp://www.w3.org/1999/xhtml
headtitle/titlescript// 动态插入 script 标签到 html 中function addScriptTag(src) {var script document.createElement(script);script.setAttribute(type,text/javascript);script.src src;document.body.appendChild(script);}// 获取 jsonp 文件window.onload function () {addScriptTag(http://example.com/ip?callbackfoo);}// 执行本地的 js 逻辑这个要跟获取到的 jsonp 文件的函数要一致function foo(data) {console.log(Your public IP address is: data.ip);};/script
/head
body
/body
/html 3.3 CORS 方式 CORS是一个W3C标准全称是跨域资源共享Cross-origin resource sharing。它允许浏览器向跨源服务器发出XMLHttpRequest请求从而克服了AJAX只能同源使用的限制。 CORS需要浏览器和服务器同时支持。目前所有浏览器都支持该功能IE浏览器不能低于IE10。整个CORS通信过程都是浏览器自动完成不需要用户参与。对于开发者来说CORS通信与同源的AJAX通信没有差别代码完全一样。浏览器一旦发现AJAX请求跨源就会自动添加一些附加的头信息有时还会多出一次附加的请求但用户不会有感觉。 因此实现CORS通信的关键是服务器端。只要服务器端实现了CORS接口就可以跨源通信。 3.3.1 CORS的请求分为两类 简单请求非简单请求只要同时满足以下两大条件就属于简单请求。 1) 请求方法是以下三种方法之一 HEADGETPOST2HTTP的头信息不超出以下几种字段 AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain凡是不同时满足上面两个条件就属于非简单请求。 3.3.2 简单请求 如果是简单请求的话会自动在头信息之中添加一个Origin字段 GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0... 这个Origin对应服务器端的Access-Control-Allow-Origin设置所以一般来说需要在服务器端加上这个Access-Control-Allow-Origin 指定域名|* 3.3.3 非简单请求 如果是非简单请求的话会在正式通信之前增加一次HTTP查询请求称为预检请求preflight。 浏览器先询问服务器当前网页所在的域名是否在服务器的许可名单之中以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复浏览器才会发出正式的XMLHttpRequest请求否则就报错。 需要注意这里是会发送2次请求第一次是预检请求第二次才是真正的请求 首先发出预检请求 // 预检请求
OPTIONS /cors HTTP/1.1
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0.. 除了Origin字段预检请求的头信息包括两个特殊字段。 1Access-Control-Request-Method 该字段是必须的用来列出浏览器的CORS请求会用到哪些HTTP方法上例是PUT。 2Access-Control-Request-Headers 该字段是一个逗号分隔的字符串指定浏览器CORS请求会额外发送的头信息字段上例是X-Custom-Header。 然后服务器收到预检请求以后 检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后确认允许跨源请求就可以做出回应。 // 预检请求的回应
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charsetutf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout2, max100
Connection: Keep-Alive
Content-Type: text/plain 最后一旦服务器通过了预检请求 以后每次浏览器正常的CORS请求就都跟简单请求一样会有一个Origin头信息字段。服务器的回应也都会有一个Access-Control-Allow-Origin头信息字段。 // 以后的请求就像拿到了通行证之后就不需要再做预检请求了。
PUT /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
X-Custom-Header: value
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0... 详情参考这里http://www.ruanyifeng.com/blog/2016/04/cors.html 参考文档 前端解决跨域问题的8种方案浏览器同源政策及其规避方法https://tonghuashuo.github.io/blog/jsonp.htmlhttp://www.cnblogs.com/yuzhongwusan/archive/2012/12/11/2812849.htmlhttp://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.htmlhttps://segmentfault.com/a/1190000002438126
