跨域解决方式总结

分手后的思念是犯贱 2022-10-06 11:45 279阅读 0赞

我的笔记原文地址：[https://www.yuque.com/bubbletg/qd/bxh5ge][https_www.yuque.com_bubbletg_qd_bxh5ge]

# 解决跨域问题的几种方案 #

1.  jsonp
2.  cors
3.  document.domain
4.  location.hash
5.  window.name
6.  postMessage
7.  websocket
8.  Nginx
9.  http-proxy-middleware

# jsonp #

jsonp是json with padding 的缩写，他不属于Ajax请求，但它可以模拟ajax请求。

### **前提：** ###

*  `‘<script> ’`标签可以绕过跨域限制
 *  服务器可以任意动态拼接数据返回

### **实现：** ###

1.  将不同源的服务器端请求地址写在src属性中

1.  服务端相应数据是一个函数调用，发给客户端的数据需要作为函数的参数。

const data = 'fu({name:"nihao",age:"20"})'
    res.send(data);

1.  客户端全局作用域下定义函数 fn
2.  对数据进行处理

### **封装jsonp:** ###

# CORS #

[CORS.xmind][]

详情参考：[http://www.ruanyifeng.com/blog/2016/04/cors.html][http_www.ruanyifeng.com_blog_2016_04_cors.html]

CORS全程是Cross origin resource sharing,即跨域资源共享，它允许浏览器向跨源服务器，发出[`XMLHttpRequest`][XMLHttpRequest]请求，从而克服了AJAX只能[同源][Link 1]使用的限制。

## 一：简介 ##

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

## 二、两种请求 ##

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

只要同时满足以下两大条件，就属于简单请求。

> （1) 请求方法是以下三种方法之一：
> 
>  *  HEAD
>  *  GET
>  *  POST
> 
> （2）HTTP的头信息不超出以下几种字段：
> 
>  *  Accept -浏览器可接收的数据格式
>  *  Accept-Language -浏览器可接收的语言
>  *  Content-Language --服务端发送的语言类型
>  *  Last-Event-ID
>  *  Content-Type：只限于三个值`application/x-www-form-urlencoded`、`multipart/form-data`、`text/plain`

这是为了兼容表单（form），因为历史上表单一直可以发出跨域请求。AJAX 的跨域设计就是，只要表单可以发，AJAX 就可以直接发。

凡是不同时满足上面两个条件，就属于非简单请求。

浏览器对这两种请求的处理，是不一样的。

## 三、简单请求 ##

### 3.1 基本流程 ###

对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个`Origin`字段。

下面是一个例子，浏览器发现这次跨源AJAX请求是简单请求，就自动在头信息之中，添加一个`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`字段的值。

### 3.2 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。

## 四、非简单请求 ##

### 4.1 预检请求 ###

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

非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的`XMLHttpRequest`请求，否则就报错。

下面是一段浏览器的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`。

### 4.2 预检请求的回应 ###

服务器收到"预检"请求以后，检查了`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相关的头信息字段。这时，浏览器就会认定，服务器不同意预检请求，因此触发一个错误，被`XMLHttpRequest`对象的`onerror`回调函数捕获。控制台会打印出如下的报错信息。

XMLHttpRequest cannot load http://api.alice.com.
    Origin http://api.bob.com is not allowed by Access-Control-Allow-Origin.

服务器回应的其他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`字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。

**（3）Access-Control-Allow-Credentials**

该字段与简单请求时的含义相同。

**（4）Access-Control-Max-Age**

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

### 4.3 浏览器的正常请求和回应 ###

一旦服务器通过了"预检"请求，以后每次浏览器正常的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`字段是每次回应都必定包含的。

## 五、与JSONP的比较 ##

CORS与JSONP的使用目的相同，但是比JSONP更强大。

JSONP只支持`GET`请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

# document.domain #

默认情况下，document.domain存放的是载入文档的服务器的主机名，可以手动设置这个属性，设置该属性有两个特点：

1.  只能设置成当前域名，或者当前域的二级域名（比如document.domain为 www.baidu.com，可以设置成 baidu.com）
2.  任何对document.domain的赋值操作，包括 document.domain = document.domain 都会导致端口号被重写为 null

通过这两个特点，我们就可以实现二级域名相同的不同域之间的跨域dom访问（就算端口不同也可以）

## 相同二级域名之间的跨域 ##

举个例子：

`http://www.qq.com`的document.domain为"qq.com"，`http://id.qq.com`的document.domain为"id.qq.com"，默认情况下，id.qq.com是无法对www.qq.com进行跨域操作的：

![image.png][]

但是，如果通过将document.domain设置成"qq.com"就不同了：

![image.png][image.png 1]

# location.hash #

> `window.location` 只读属性，返回一个`Location`对象，其中包含有关文档当前位置的信息。\*\*window.location : 所有字母必须小写！\*\*只要赋给 location 对象一个新值，文档就会使用新的 URL 加载，就好像使用修改后的 URL 调用了[window.location.assign()][window.location.assign]一样。需要注意的是，安全设置，如 [CORS（跨域资源共享）][CORS]，可能会限制实际加载新页面。
> 
>  
> 
> 案例：a、b同域,c单独一个域。a现在想访问c：a通过iframe给c传一个hash值，c收到hash值后再创建一个iframe把值通过hash传递给b,b将hash结果放到a的hash值中。

// a.html
    <iframe src="http://localhost:4000/c.html#iloveyou"></iframe>
    <script>
    //接收b传来的hash值
    window.onhashchange = function(){
        console.log(location.hash)
    }
    </script>
    // c.html
    <script>
    //接收a传来的hash值
    console.log(location.hash)
    //创建一个iframe，把回复的消息传给b
    let iframe = document.createElement('iframe');
    iframe.src='http://localhost:3000/b.html#idontloveyou';
    document.body.appendChild(iframe);
    </script>
    //b.html
    <script>
    //a.html引的c, c又引的b,所以b.parent.parent即是a
    window.parent.parent.location.hash = location.hash
    </script>

# window.name #

在页面在浏览器端展示的时候，我们总能在控制台拿到一个全局变量window，该变量有一个name属性，其有以下 特征：

1.  每个窗口都有独立的window.name与之对应；
2.  在一个窗口的生命周期中（被关闭前），窗口载入的所有页面同时共享一个window.name，每个页面对window.name都有读写的权限；
3.  window.name一直存在与当前窗口，即使是有新的页面载入也不会改变window.name的值；
4.  window.name可以存储不超过2M的数据，数据格式按需自定义。

# postMessage #

> 对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 `Document.domain`设置为相同的值) 时，这两个脚本才能相互通信。`window.postMessage()` 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。
> 
> `window.postMessage()` 方法被调用时，会在所有页面脚本执行完毕之后（e.g., 在该方法之后设置的事件、之前设置的timeout 事件,etc.）向目标窗口派发一个`MessageEvent`消息。

语法：`otherWindow.postMessage(message, targetOrigin, [transfer])`;

*  otherWindow:指目标窗口，也就是给哪个window发消息，是 window.frames 属性的成员或者由 window.open 方法创建的窗口;
 *  message 属性是要发送的消息，类型为 String、Object (IE8、9 不支持)；
 *  targetOrigin:属性来指定哪些窗口能接收到消息事件，其值可以是字符串"\*"（表示无限制）或者一个URI。
 *  transfer:是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

> message属性有：

*  data 属性为 window.postMessage 的第一个参数；
 *  origin 属性表示调用window.postMessage() 方法时调用页面的当前状态；
 *  source 属性记录调用 window.postMessage() 方法的窗口信息;

> 案例：a.html 给b.html发消息

// a.html
    <iframe src="http://localhost:4000/b.html" id="frame" onload="load()"></iframe>
    <script>
    function load(params){
        let frame = document.getElementById('frame');
        //获取iframe中的窗口,给iframe里嵌入的window发消息
        frame.contentWindow.postMessage('hello','http://localhost:4000')
        // 接收b.html回过来的消息
        window.onmessage = function(e){
            console.log(e.data)
        }
    }
    </script>
    
    
    // b.html
    <script>
    //监听a.html发来的消息
    window.onmessage = function(e){
        console.log(e.data)
        //给发送源回消息
        e.source.postMessage('nice to meet you',e.origin)
    }
    </script>

# websocket #

> WebSocket对象提供了用于创建和管理 WebSocket 连接，以及可以通过该连接发送和接收数据的 API。它是基于TCP的全双工通信,即服务端和客户端可以双向进行通讯，并且允许跨域通讯。基本协议有`ws://`(非加密)和`wss://`(加密)

//socket.html
    let socket = new WebSocket('ws://localhost:3000');
    // 给服务器发消息
    socket.onopen = function() {
        socket.send('hello server')
    }
    // 接收服务器回复的消息
    socket.onmessage = function(e) {
        console.log(e.data)
    }
    // server.js
    let express = require('express');
    let app = express();
    let WebSocket = require('ws');//npm i ws
    // 设置服务器域为3000端口
    let wss = new WebSocket.Server({port:3000});
    //连接
    wss.on('connection', function(ws){
        // 接收客户端传来的消息
        ws.on('message', function(data){
            console.log(data);
            // 服务端回复消息
            ws.send('hello client')
        })
    })

# Nginx #

> [Nginx (engine x)][Nginx _engine x] 是一个高性能的[HTTP][]和[反向代理][Link 2]服务器，也是一个`IMAP/POP3/SMTP`服务器。
> 
> 案例：在nginx根目录下创建json/a.json，里面随便放些内容

// client.html
    let xhr = new XMLHttpRequest;
    xhr.open('get', 'http://localhost/a.json', true);
    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4){
            if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304 ){
                console.log(xhr.response);
            }
        }
    }
    
    // server.js
    let express = require('express');
    let app = express();
    app.use(express.static(__dirname));
    app.listen(3000);
    
    // nginx.conf
    location / {// 代表输入/时默认去打开root目录下的html文件夹
        root html;
        index index.html index.htm;
    }
    location ~.*\.json{//代表输入任意.json后去打开json文件夹
        root json;
        add_header "Access-Control-Allow-Origin" "*";
    }

# http-proxy-middleware #

> NodeJS 中间件 http-proxy-middleware 实现跨域代理，原理大致与 nginx 相同，都是通过启一个代理服务器，实现数据的转发，也可以通过设置 cookieDomainRewrite 参数修改响应头中 cookie 中的域名，实现当前域的 cookie 写入，方便接口登录认证。

*  vue框架：利用 node + webpack + webpack-dev-server 代理接口跨域。在开发环境下，由于 Vue 渲染服务和接口代理服务都是 webpack-dev-server，所以页面与代理接口之间不再跨域，无须设置 Headers 跨域信息了。

module.exports = {
        entry: {},
        module: {},
        ...
        devServer: {
            historyApiFallback: true,
            proxy: [{
                context: '/login',
                target: 'http://www.proxy2.com:8080',  // 代理跨域目标接口
                changeOrigin: true,
                secure: false,  // 当代理某些 https 服务报错时用
                cookieDomainRewrite: 'www.domain1.com'  // 可以为 false，表示不修改
            }],
            noInfo: true
        }
    }

*  非vue框架的跨域（2 次跨域）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>nginx跨域</title>
    </head>
    <body>
        <script>
            var xhr = new XMLHttpRequest();
            // 前端开关：浏览器是否读写 cookie
            xhr.withCredentials = true;
            // 访问 http-proxy-middleware 代理服务器
            xhr.open('get', 'http://www.proxy1.com:3000/login?user=admin', true);
            xhr.send();
        </script>
    </body>
    </html>

// 中间代理服务器
    var express = require("express");
    var proxy = require("http-proxy-middleware");
    var app = express();
    app.use(
        "/",
        proxy({
            // 代理跨域目标接口
            target: "http://www.proxy2.com:8080",
            changeOrigin: true,
            // 修改响应头信息，实现跨域并允许带 cookie
            onProxyRes: function(proxyRes, req, res) {
                res.header("Access-Control-Allow-Origin", "http://www.proxy1.com");
                res.header("Access-Control-Allow-Credentials", "true");
            },
            // 修改响应信息中的 cookie 域名
            cookieDomainRewrite: "www.proxy1.com" // 可以为 false，表示不修改
        })
    );
    app.listen(3000);

// 服务器
    var http = require("http");
    var server = http.createServer();
    var qs = require("querystring");
    server.on("request", function(req, res) {
        var params = qs.parse(req.url.substring(2));
        // 向前台写 cookie
        res.writeHead(200, {
            "Set-Cookie": "l=a123456;Path=/;Domain=www.proxy2.com;HttpOnly" // HttpOnly：脚本无法读取
        });
        res.write(JSON.stringify(params));
        res.end();
    });
    server.listen("8080");

参考文章：

[跨域资源共享 CORS 详解][http_www.ruanyifeng.com_blog_2016_04_cors.html]

[跨域总结][Link 3]

[DOM跨域的三种解决方案：document.domain、window.name、window.postMessage][DOM_document.domain_window.name_window.postMessage]

[https_www.yuque.com_bubbletg_qd_bxh5ge]: https://www.yuque.com/bubbletg/qd/bxh5ge
[CORS.xmind]: https://www.yuque.com/office/yuque/0/2021/xmind/519808/1613810444430-ffc77873-0e19-4ad7-83bf-631c2f55fd40.xmind?from=https%3A%2F%2Fwww.yuque.com%2Fbubbletg%2Fqd%2Fbxh5ge
[http_www.ruanyifeng.com_blog_2016_04_cors.html]: http://www.ruanyifeng.com/blog/2016/04/cors.html
[XMLHttpRequest]: http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html
[Link 1]: http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
[image.png]: /images/20221005/a8cd18d58b6f4ba3a281756a74fd2d4b.png
[image.png 1]: /images/20221005/40831942556f48f4b56fc12b7330fb05.png
[window.location.assign]: https://developer.mozilla.org/zh-CN/docs/Web/API/Location/assign
[CORS]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
[Nginx _engine x]: https://www.nginx.com/resources/wiki/
[HTTP]: https://baike.baidu.com/item/HTTP
[Link 2]: https://baike.baidu.com/item/%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%86/7793488
[Link 3]: https://juejin.cn/post/6844903649106378766#heading-2
[DOM_document.domain_window.name_window.postMessage]: https://blog.csdn.net/huzhenv5/article/details/104884760?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.control