JS 跨域缘由及其解决方案

2024年4月29日 202次阅读 来源: null__

发生跨域题目的缘由

跨域题目是浏览器同源战略限定，当前域名的js只能读取同域下的窗口属性。

跨域题目发生的场景

当要在在页面中运用js猎取其他网站的数据时，就会发生跨域题目，比方在网站中运用ajax要求其他网站的天色、快递或许其他数据接口时以及hybrid app中要求数据，浏览器就会提醒以下毛病。这类场景下就要处置惩罚js的跨域题目。

XMLHttpRequest cannot load http://你要求的域名. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://当前页的域名' is therefore not allowed access.

哪些状况会发生跨域题目

一个网站的网址构成包含协定名，子域名，主域名，端口号。比方 https://github.com/ ，个中https是协定名，www是子域名，github是主域名，端口号是80，当在在页面中从一个url要求数据时，假如这个url的协定名、子域名、主域名、端口号恣意一个有一个差别，就会发生跨域题目。
即使是在 http://localhost:80/ 页面要求 http://127.0.0.1:80/ 也会有跨域题目

处置惩罚跨域题目

处置惩罚跨域题目有以下一种体式格局

  • 运用jsonp
  • 服务端代办
  • 服务端设置Request Header头中Access-Control-Allow-Origin为指定可猎取数据的域名

jsonp的处置惩罚体式格局

json≠jsonp

道理

jsonp处置惩罚跨域题目的道理是，浏览器的script标签是不受同源战略限定(你能够在你的网页中设置script的src属性问cdn服务器中静态文件的途径)。那末就能够运用script标签从服务器猎取数据，要求时增加一个参数为callbakc=?，?号时你要实行的回调要领。

前端完成

以jQuery2.1.3的ajax要领为例

javascript$.ajax({
    url:"",
    dataType:"jsonp",
    data:{
        params:""
        }
}).done(function(data){
    //dosomething..
})

仅仅是客户端运用jsonp要求数据是不可的，由于jsonp的要求是放在script标签中的，和平常要求差别的处所在于，它要求到的是一段js代码，假如服务端返回了json字符串，那末浏览器就会报错。所以jsonp返回数据须要服务端做一些处置惩罚。

服务端返回数据处置惩罚

上面说了jsonp的道理是应用script标签来处置惩罚跨域，然则script标签是用来猎取js代码的，那末我们怎样猎取到要求的数据呢。

这就须要服务端做一些推断，当参数中带有callback属性时，返回的type要为application/javascript,把数据作为callback的参数实行。下面是jsonp返回的数据的花样示例

javascript/**/ typeof jQuery21307270454438403249_1428044213638 === 'function' && jQuery21307270454438403249_1428044213638({"code":1,"msg":"success","data":{"test":"test"}});

这是express4.12.3关于jsonp的完成代码

javascript  // jsonp
  if (typeof callback === 'string' && callback.length !== 0) {
    this.charset = 'utf-8';
    this.set('X-Content-Type-Options', 'nosniff');
    this.set('Content-Type', 'text/javascript');

    // restrict callback charset
    callback = callback.replace(/[^\[\]\w$.]/g, '');

    // replace chars not allowed in JavaScript that are in JSON
    body = body
      .replace(/\u2028/g, '\\u2028')
      .replace(/\u2029/g, '\\u2029');

    // the /**/ is a specific security mitigation for "Rosetta Flash JSONP abuse"
    // the typeof check is just to reduce client error noise
    body = '/**/ typeof ' + callback + ' === \'function\' && ' + callback + '(' + body + ');';
  }

服务端设置Access-Control-Allow-Origin

这类体式格局只需服务端把response的header头中设置Access-Control-Allow-Origin为制订可要求当前域名下数据的域名即可。平常状况下设为即可。如许客户端就不须要运用jsonp来猎取数据。
关于Access-Control-Allow-Origin设为是不是会有安全题目，知乎上有个议论。

http://www.zhihu.com/question/22992229

浏览器支撑

Access-Control-Allow-Origin是html5新增的一项规范，IE10以下是不支撑的，所以假如产物面向的是PC端，就要运用服务端代办或jsonp。

    原文作者：null__
    原文地址: https://segmentfault.com/a/1190000002647143
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞