JS跨域总结攻略

什么是跨域

在浏览器中，一个Web页面从一个服务器的域名、端口或协议请求资源时，如果该请求目标与该Web页面的域名、端口或协议不一致，就会发生跨域。

JS跨域的原因

跨域问题的出现是因为浏览器的同源策略。同源策略是浏览器对JavaScript代码的安全限制，同源是指协议，域名，端口号均相同。浏览器阻止页面中的JavaScript程序去访问不同源下的资源，以此保障用户的信息安全。

JS跨域的解决方案

JSONP

JSONP（JSON with Padding）是一种解决跨域的方案，它的原理是利用script标签不受同源策略限制的特性，在请求时通过动态创建script标签，将需要获取的数据作为回调函数的参数传递到前端页面中。

示例：

前端页面代码：

function handleResponse(data) {
  console.log(data);
}

const script = document.createElement("script");
script.src = "http://domain1.com/api?callback=handleResponse";
document.body.appendChild(script);

后台接口代码：

const query = req.query;
const str = JSON.stringify(req.query);
const callback = query.callback;
res.send(`${callback}(${str})`);

CORS

CORS（Cross-Origin Resource Sharing）是由W3C提出的一种跨域解决方案，其原理是在服务端设置Access-Control-Allow-Origin头信息来告诉浏览器请求的域可以跨域请求数据。

示例：

前端页面代码：

fetch("http://domain2.com/api", {
  method: "GET",
  mode: "cors",
  headers: {
    "Content-Type": "application/json",
  },
}).then((res) => console.log(res));

后台接口代码：

res.set("Access-Control-Allow-Origin", "http://domain1.com");
res.set("Access-Control-Allow-Methods", "GET, POST");
res.set("Access-Control-Allow-Headers", "Content-Type");
res.send("Hello CORS");