JS跨域总结

JS跨域总结攻略

什么是跨域

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

JS跨域的原因

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

JS跨域的解决方案

1. 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})`);

1. 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");

其他跨域解决方案

1. 代理服务器

可以在本地创建一个代理服务器，用这个服务器向目标服务器发起请求，然后再将结果返回给浏览器，绕过同源策略的限制。但是这种方案需要依赖于一个可靠的代理服务器。

1. WebSocket

WebSocket是一种双向通信协议，没有同源策略限制，可以用来在不同源的浏览器客户端之间打通通讯线路。但是该协议需要在服务端和客户端同时支持，需要较高的技术实力才能实现。

总结

对于跨域问题，我们可以通过JSONP和CORS两种方案来解决。JSONP适用于简单的跨域场景，而CORS则适用于复杂的跨域场景。除了这两种方案，我们还可以通过代理服务器和WebSocket等技术来解决跨域问题。