跨域

TomorrowLM
60 阅读14分钟

跨域

javascript.ruanyifeng.com/bom/cors.ht…

wangdoc.com/javascript/…

同源限制

420532-20220622090900141-1679123227.png

同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议

非同源会出现的限制

  1. 不能访问操作DOM。比如通过openr访问操作另一个页面的DOM信息。
  2. 不能访问资源。比如通过XMLHttpRequest或者fetch访问资源。
  3. 不能访问cookie，stroage，indexDB等信息。

CORS

CORS就是一套AJAX跨域问题的解决方案

CORS的原理: 允许浏览器向跨域的服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

跨域资源共享(CORS) 是一种基于 HTTP 头的机制，它使用额外的HTTP头来告诉浏览器让运行在一个 origin (domain) 上的 Web 应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

CORS 需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能。因此，实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨域通信。服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

跨域请求分类

浏览器将跨域请求分为两大类: 简单请求和非简单请求.

同时满足以下条件的请求都为简单请求:

  • 请求方式为下列之一:

    • GET
    • POST
    • HEAD

  • HTTP 的头信息不超出以下几种字段:

    • Accept
    • Accept-Language
    • Content-Language
    • Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

凡是不同时满足上面两个条件，就属于非简单请求。一句话，简单请求就是简单的 HTTP 方法与简单的 HTTP 头信息的结合。

CORS 相关字段

 Access-Control-Allow-Methods: GET, POST, PUT
 Access-Control-Allow-Headers: X-Custom-Header
 Access-Control-Allow-Credentials: true
 Access-Control-Max-Age: 1728000

（1）Access-Control-Allow-Methods

该字段必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次“预检”请求。

（2）Access-Control-Allow-Headers

如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在“预检”中请求的字段。

（4）Access-Control-Max-Age

该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即允许缓存该条回应1728000秒（即20天），在此期间，不用发出另一条预检请求。

（1）Access-Control-Allow-Origin

该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。

（2）Access-Control-Allow-Credentials

该字段可选。它的值是一个布尔值，表示是否允许发送 Cookie。默认情况下，Cookie 不包括在 CORS 请求之中。设为true，即表示服务器明确许可，浏览器可以把 Cookie 包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送 Cookie，不发送该字段即可。

（3）Access-Control-Expose-Headers

该字段可选。CORS 请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个服务器返回的基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader('FooBar')可以返回FooBar字段的值。

简单请求

基本流程

对于简单请求，浏览器直接发出 CORS 请求。具体来说，就是在头信息之中，增加一个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字段用来说明，本次请求来自哪个域（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。

  • 响应：Origin指定的源

    • 不在许可范围内服务器会返回一个正常的 HTTP 回应。浏览器发现回应的头信息没有包含Access-Control-Allow-Origin字段，就知道出错了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。注意，这种错误无法通过状态码识别，因为 HTTP 回应的状态码有可能是200。

    • 如果Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段。

       Access-Control-Allow-Origin: http://api.bob.com
 Access-Control-Allow-Credentials: true
 Access-Control-Expose-Headers: FooBar
 Content-Type: text/html; charset=utf-8

      上面的头信息之中，有三个与 CORS 请求相关的字段，都以Access-Control-开头。

      （1）Access-Control-Allow-Origin

      该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。

      （2）Access-Control-Allow-Credentials

      该字段可选。它的值是一个布尔值，表示是否允许发送 Cookie。默认情况下，Cookie 不包括在 CORS 请求之中。设为true，即表示服务器明确许可，浏览器可以把 Cookie 包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送 Cookie，不发送该字段即可。

      （3）Access-Control-Expose-Headers

      该字段可选。CORS 请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个服务器返回的基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader('FooBar')可以返回FooBar字段的值。

withCredentials 属性

上面说到，CORS 请求默认不包含 Cookie 信息（以及 HTTP 认证信息等） 。如果需要包含 Cookie 信息，一方面要服务器同意，同时指定Access-Control-Allow-Credentials字段。

 Access-Control-Allow-Credentials: true

另一方面，开发者必须在 AJAX 请求中打开withCredentials属性。

 var xhr = new XMLHttpRequest();
 xhr.withCredentials = true;

否则，即使服务器同意发送 Cookie，浏览器也不会发送。或者，服务器要求设置 Cookie，浏览器也不会处理。

但是，如果省略withCredentials设置，有的浏览器还是会一起发送 Cookie。这时，可以显式关闭withCredentials。

 xhr.withCredentials = false;

需要注意的是，如果要发送 Cookie，Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的域名。同时，Cookie 依然遵循同源政策，只有用服务器域名设置的 Cookie 才会上传，其他域名的 Cookie 并不会上传，且（跨域）原网页代码中的document.cookie也无法读取服务器域名下的 Cookie。

非简单请求

预检请求

非简单请求是那种对服务器提出特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。

非简单请求的 CORS 请求，会在正式通信之前，增加一次 HTTP 查询请求，称为“预检”请求（preflight）。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些 HTTP 动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。这是为了防止这些新增的请求，对传统的没有 CORS 支持的服务器形成压力，给服务器一个提前拒绝的机会，这样可以防止服务器大量收到DELETE和PUT请求，这些传统的表单不可能跨域发出的请求。

  • JavaScript 脚本

    var url = 'http://api.alice.com/cors';
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send();

    上面代码中，HTTP 请求的方法是PUT，并且发送一个自定义头信息X-Custom-Header。

  • “预检”请求

    浏览器发现，这是一个非简单请求，就自动发出一个“预检”请求，要求服务器确认可以这样请求。下面是这个“预检”请求的 HTTP 头信息。

    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...

    “预检”请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，表示请求来自哪个源。

    除了Origin字段，“预检”请求的头信息包括两个特殊字段。

    （1）Access-Control-Request-Method

    该字段是必须的，用来列出浏览器的 CORS 请求会用到哪些 HTTP 方法，上例是PUT。

    （2）Access-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; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

      上面的 HTTP 回应中，关键的是Access-Control-Allow-Origin字段，表示http://api.bob.com可以请求数据。该字段也可以设为星号，表示同意任意跨源请求。

      Access-Control-Allow-Origin: *

    • 禁止

      如果服务器否定了“预检”请求，会返回一个正常的 HTTP 回应，但是没有任何 CORS 相关的头信息字段，或者明确表示请求不符合条件。

      OPTIONS http://api.bob.com HTTP/1.1
Status: 200
Access-Control-Allow-Origin: https://notyourdomain.com
Access-Control-Allow-Method: POST

      上面的服务器回应，Access-Control-Allow-Origin字段明确不包括发出请求的http://api.bob.com。

      这时，浏览器就会认定，服务器不同意预检请求，因此触发一个错误，被XMLHttpRequest对象的onerror回调函数捕获。控制台会打印出如下的报错信息。

      XMLHttpRequest cannot load http://api.alice.com.
Origin http://api.bob.com is not allowed by Access-Control-Allow-Origin.
浏览器的正常请求和回应

一旦服务器通过了“预检”请求，以后每次浏览器正常的 CORS 请求，就都跟简单请求一样，会有一个Origin头信息字段。服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段。

下面是“预检”请求之后，浏览器的正常 CORS 请求。

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...

上面头信息的Origin字段是浏览器自动添加的。

下面是服务器正常的回应。

Access-Control-Allow-Origin: http://api.bob.com
Content-Type: text/html; charset=utf-8

上面头信息中，Access-Control-Allow-Origin字段是每次回应都必定包含的。

CORS跨域示例

1）前端设置：
  • 原生ajax：
复制代码var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容

// 前端设置是否带cookie
xhr.withCredentials = true;

xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
};
  • jquery ajax：
复制代码$.ajax({
    ...
   xhrFields: {
       withCredentials: true    // 前端设置是否带cookie
   },
   crossDomain: true,   // 会让请求头中包含跨域的额外信息，但不会含cookie
    ...
});
2）服务端设置：
  • nodejs代码
复制代码var http = require('http');
var server = http.createServer();
var qs = require('querystring');

server.on('request', function(req, res) {
    var postData = '';

    // 数据块接收中
    req.addListener('data', function(chunk) {
        postData += chunk;
    });

    // 数据接收完毕
    req.addListener('end', function() {
        postData = qs.parse(postData);

        // 跨域后台设置
        res.writeHead(200, {
            'Access-Control-Allow-Credentials': 'true',     // 后端允许发送Cookie
            'Access-Control-Allow-Origin': 'http://www.domain1.com',    // 允许访问的域（协议+域名+端口）
            /* 
             * 此处设置的cookie还是domain2的而非domain1，因为后端也不能跨域写cookie(nginx反向代理可以实现)，
             * 但只要domain2中写入一次cookie认证，后面的跨域接口都能从domain2中获取cookie，从而实现所有的接口都能跨域访问
             */
            'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'  // HttpOnly的作用是让js无法读取cookie
        });

        res.write(JSON.stringify(postData));
        res.end();
    });
});

server.listen('8080');
console.log('Server is running at port 8080...');

与 JSONP 的比较

CORS 与 JSONP 的使用目的相同，但是比 JSONP 更强大。JSONP 只支持GET请求，CORS 支持所有类型的 HTTP 请求。JSONP 的优势在于支持老式浏览器，以及可以向不支持 CORS 的网站请求数据。

跨域解决方案

img

JSONP

jsonp的原理：利用script标签可以跨域的原理实现。html中通过动态创建一个script标签，通过它的src属性发送跨域请求，然后服务端返回这个回调函数的执行，并将需要响应的数据放到回调函数的参数里

  • 原生JS实现

    var script = document.createElement('script');
var head = document.getElementByTagName('head')[0];
script.src='http::/1.html/1.php?callback=hello&username=123';
head.appendChild(script);
function hello(data){
    console.log(data);
}

服务端返回如下（返回时即执行全局函数）：
hello({"success": true, "user": "admin"})

  • jquery Ajax实现（jq的ajax自带解决跨域的方法。底层原理采用的JSONP的跨域解决方案）

    $.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "handleCallback",  // 自定义回调函数名
    data: {}
});

  • Vue axios实现

    this.$http = axios;
this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'handleCallback'
}).then((res) => {
    console.log(res); 
})

优点

  • 它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制
  • 它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持
  • 并且在请求完毕后可以通过调用callback的方式回传结果

缺点

  • 它只支持GET请求而不支持 POST 等其它类型的 HTTP 请求
  • 它只支持跨域 HTTP 请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript 调用的问题

前端代理

CORS后端代理

Nginx跨域代理

实现思路：通过Nginx配置一个代理服务器域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域访问。 nginx具体配置：

 #proxy服务器
 server {
     listen       81;
     server_name  www.domain1.com;
 ​
     location / {
         proxy_pass   http://www.domain2.com:8080;  #反向代理
         proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
         index  index.html index.htm;
 ​
         # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
         add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时，可为*
         add_header Access-Control-Allow-Credentials true;
     }
 }
node允许跨域
 app.use(async (ctx, next) => {
   ctx.set("Access-Control-Allow-Origin", ctx.headers.origin);
   ctx.set("Access-Control-Allow-Credentials", true);
   ctx.set("Access-Control-Request-Method", "PUT,POST,GET,DELETE,OPTIONS");
   ctx.set(
     "Access-Control-Allow-Headers",
     "Origin, X-Requested-With, Content-Type, Accept, cc"
   );
   if (ctx.method === "OPTIONS") {
     ctx.status = 204;
     return;
   }
   await next();
 });

优势：

  • 在服务端进行控制是否允许跨域，可自定义规则
  • 支持各种请求方式

缺点：

  • 会产生额外的请求

document.domain + iframe跨域

"document.domain是一个JavaScript属性，它用于设置或获取当前文档的域名。它的作用是允许同源策略下的不同子域(例如，在域名“example.com”下，“mail.example.com”和“calendar.example.com”都是子域) 之间进行通信，从而实现跨域操作。

document.domain的限制主要包括以下几点：

  1. document.domain只能设置为当前文档的顶级域名或者其子域名。例如，如果当前文档的域名是example.com，那么document.domain可以设置为example.com或者其子域名如subdomain.example.com，但不能设置为其他域名如google.com。
  2. document.domain必须在所有相关页面的脚本中设置为相同的值。这意味着，如果一个页面将document.domain设置为example.com，那么其他与之进行跨域通信的页面也必须将document.domain设置为example.com，否则跨域通信将被浏览器阻止。
  3. document.domain只对使用相同协议和端口的页面起作用。例如，如果一个页面使用http://example.com访问，那么其他同源的页面也必须使用http://example.com，而不能使用https://example.com或者http://subdomain.example.com。

1）父窗口：(www.domain.com/a.html)

 <iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
 <script>
     document.domain = 'domain.com';
     var user = 'admin';
 </script>

1）子窗口：(child.domain.com/b.html)

 <script>
     document.domain = 'domain.com';
     // 获取父窗口中变量
     console.log('get js data from parent ---> ' + window.parent.user);
 </script>

location.hash + iframe跨域

实现原理： a欲与b跨域相互通信，通过中间页c来实现。 三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。

具体实现：A域：a.html -> B域：b.html -> A域：c.html，a与b不同域只能通过hash值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c可通过parent.parent访问a页面所有对象。

1）a.html：(www.domain1.com/a.html)

 <iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
 <script>
     var iframe = document.getElementById('iframe');
  
     // 向b.html传hash值
     setTimeout(function() {
         iframe.src = iframe.src + '#user=admin';
     }, 1000);
     
     // 开放给同域c.html的回调方法
     function onCallback(res) {
         alert('data from c.html ---> ' + res);
     }
 </script>

2）b.html：(www.domain2.com/b.html)

 <iframe id="iframe" src="http://www.domain1.com/c.html" style="display:none;"></iframe>
 <script>
     var iframe = document.getElementById('iframe');
  
     // 监听a.html传来的hash值，再传给c.html
     window.onhashchange = function () {
         iframe.src = iframe.src + location.hash;
     };
 </script>

3）c.html：(www.domain1.com/c.html)

 <script>
     // 监听b.html传来的hash值
     window.onhashchange = function () {
         // 再通过操作同域a.html的js回调，将结果传回
         window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', ''));
     };
 </script>

window.name

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有 的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是 持久存在一个窗口载入过的所有页面中的

postMessage + iframe跨域

用法：postMessage(data,origin)方法接受两个参数：

  • data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
  • origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

a.com/index.html中的代码：

 <iframe id="ifr" src="b.com/index.html"></iframe>
 <script type="text/javascript">
 window.onload = function() {
     var ifr = document.getElementById('ifr');
     var targetOrigin = 'http://b.com';  // 若写成'http://b.com/c/proxy.html'效果一样
                                         // 若写成'http://c.com'就不会执行postMessage了
     ifr.contentWindow.postMessage('I was there!', targetOrigin);
 };
 </script>
   
 // e.data: 发送过来的数据
 // e.origin: 消息源的 URI(可能包含协议、域名和端口)，用来验证数据源
 // e.source: 消息源，消息的发送窗口/iframe

b.com/index.html中的代码：

 <script type="text/javascript">
     window.addEventListener('message', function(event){
         // 通过origin属性判断消息来源地址
         if (event.origin == 'http://a.com') {
             alert(event.data);    // 弹出"I was there!"
             alert(event.source);  // 对a.com、index.html中window对象的引用
                                   // 但由于同源策略，这里event.source不可以访问window对象
         }
     }, false);
 </script>

跨域操作cookie

需要满足3个条件：

服务的响应头中需要携带Access-Control-Allow-Credentials并且为true。

浏览器发起ajax需要指定withCredentials 为true

响应头中的Access-Control-Allow-Origin一定不能为*，必须是特定的域名

avatar
文章
阅读
粉丝