JavaScript 跨域问题

一、什么是跨域

跨域 (Cross-origin resource sharing, CORS) 是指在浏览器中，同源策略限制了来自不同域的脚本对每个网络资源的访问权限。

同源策略限制了一个网页脚本只能访问来自同一来源的网络资源。来源由协议，域名和端口号组成。如果协议，域名或端口不同，就视为不同的源。

跨域资源共享(CORS)是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行在一个origin (domain)的web应用被准许访问来自不同源的指定的资源。

对于跨域请求，浏览器会在请求头中加入 Origin 字段，服务器根据这个字段来判断是否允许跨域访问。如果服务器允许，则在响应头中加入 Access-Control-Allow-Origin 字段。

对于简单请求(simple request)，只会发送一个OPTIONS请求作为预检请求，询问服务器是否允许发送真正的请求。对于非简单请求(non-simple request)，在发送真正的请求之前会先发送一个OPTIONS请求作为预检请求。

可以通过使用 JSONP ，CORS， 代理服务器 或者 WebSocket 等方式来解决跨域问题。

二、如何解决跨域问题

1、通过配置服务器端解决

可以通过以下方式来解决跨域问题:

• 使用 Access-Control-Allow-Origin 头允许特定域名访问资源
• 使用 Access-Control-Allow-Credentials 头允许带上凭据（cookies）访问资源
• 使用 Access-Control-Allow-Methods 头允许特定的 HTTP 方法访问资源
• 使用 Access-Control-Allow-Headers 头允许特定的请求头访问资源
• 使用 Access-Control-Max-Age 头预检请求的有效期

这些方法都可以在服务器端配置，从而解决跨域问题。

需要注意的是,如果使用了 Access-Control-Allow-Origin 头来允许特定域名访问资源，那么当此值设为 * 时，所有域都能访问该资源，这可能会带来安全隐患，因此应该谨慎使用。

2、通过使用 JSONP 解决

使用 JSONP 可以解决跨域问题,JSONP 允许网页从不同源加载脚本。这样就可以通过动态创建 <script> 标签来加载并执行来自不同域名的 JavaScript。

3、通过使用代理服务器解决

使用代理服务器也可以解决跨域问题，客户端向代理服务器发送请求，代理服务器再向目标服务器发送请求，并将目标服务器返回的结果返回给客户端。这样就可以避免浏览器的同源策略限制。

4、通过使用 WebSocket 解决

使用 WebSocket 也可以解决跨域问题,WebSocket 是 HTML5 中新增的一种在单个 TCP 连接上进行全双工通讯的协议。它的特点是建立在 TCP 上，而不是建立在 HTTP 之上，因此可以避免跨域限制。

总之，解决跨域问题有很多种方法，每种方法都有其优缺点，应该根据具体情况来选择最合适的方法。