如何实现跨域

什么是跨域： 当协议、域名、端口号有一个不同时，就算跨域。
下面三个标签允许跨域：

• <img src=XXX>
• <link href=XXX>
• <script src=XXX>

1. JSONP

利用 script 标签是可以跨域请求的特点，不过只能进行 GET 请求
日常使用中我们需要封装一个 JSONP

// index.html
function jsonp({ url, params, callback }) {
  return new Promise((resolve, reject) => {
    let script = document.createElement("script");
    window[callback] = function (data) {
      resolve(data);
      document.body.removeChild(script);
    };
    params = { ...params, callback };
    let arrs = [];
    for (let key in params) {
      arrs.push(`${key}=${params[key]}`);
    }
    script.src = `${url}?${arrs.join("&")}`;
    document.body.appendChild(script);
  });
}
jsonp({
  url: "http://localhost:3000/say",
  params: { wd: "Iloveyou" },
  callback: "show",
}).then((data) => {
  console.log(data);
});

// server.js
let express = require("express");
let app = express();
app.get("/say", function (req, res) {
  let { wd, callback } = req.query;
  res.end(`${callback}('i love you too')`);
});
app.listen(3000);

1. CORS

后端 Access-Control-Allow-Origin 响应头字段设置即可，设置通配符*可以让所有域名访问，还可以设置特别的域名地址。

3. postMessage()

• 页面和其打开的新窗口的数据传递
• 多窗口之间消息传递
• 页面与嵌套的 iframe 消息传递

otherWindow.postMessage(message, targetOrigin, [transfer]);

• message: 将要发送到其他 window 的数据。
• targetOrigin:通过窗口的 origin 属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个 URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配 targetOrigin 提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。
• transfer(可选)：是一串和 message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

4. websocket（一般使用 socket.io），本省不受同源策略限制
5. 服务器代理转发

同源策略是浏览器的安全策略，服务器实际上是不受限制的，所以我们可以把浏览器发出的请求在服务器做一次代理请求到另一个服务器，完成请求操作。
6.nginx 反向代理

最后放一个超厉害的绘图链接CORS - Cross Origin Resource Sharing