深入浅出JavaScript跨域解决方案

一、什么是跨域？

跨域（Cross-Origin Resource Sharing, CORS）是指一个域下的文档或脚本试图请求另一个域下的资源，此时浏览器为了防止恶意网站窃取敏感数据，会对这种跨域请求进行限制。这里的“源”由协议、域名、端口三个部分组成，只有完全一致才被视为同源。

二、跨域的原因与限制

浏览器对跨域请求的限制主要体现在以下几个方面：

XMLHttpRequest (AJAX) 请求

Fetch API 请求

WebSocket 连接

<script>、<img>、<link>、<iframe> 等标签加载资源

然而，一些“简单请求”（如GET请求，HEAD请求，POST请求但没有自定义头信息，Content-Type仅限于application/x-www-form-urlencoded、multipart/form-data、text/plain）在一定条件下允许跨域。

三、跨域解决方案

1. JSONP（JSON with Padding）

JSONP是一种非官方跨域数据交互协议，通过动态插入<script>标签绕过同源策略。服务器返回的是带有回调函数调用的JS代码，而不是常规的JSON对象。

2. CORS（Cross-Origin Resource Sharing）

CORS是W3C标准，通过在服务器端设置特定的响应头，允许浏览器发起跨域请求。例如，服务器需设置Access-Control-Allow-Origin头部指定哪些域名可以访问。

Access-Control-Allow-Origin: *

或

Access-Control-Allow-Origin: http://example.com

3. 代理（Proxy）

通过服务器端代理，客户端所有的请求都指向同一域名下的服务器，由服务器转发到目标地址获取数据，然后再返回给客户端，这样就规避了浏览器的同源策略。

例如，在Node.js中使用express-http-proxy中间件实现：

const express = require('express'); const proxy = require('express-http-proxy'); const app = express(); app.use('/api', proxy('http://target-domain.com';)); // 将/api下的请求代理到目标域名

4. postMessage API

主要用于在嵌入式内容（如IFrame）和其他窗口之间发送消息，实现跨文档通信。