JavaScript中的同源策略与跨域解决方案

一、同源策略的基本概念

同源策略是浏览器的一种安全机制，用于限制一个源的文档或脚本如何与另一个源的资源进行交互。它的核心是防止恶意网站通过脚本窃取其他网站的数据。

同源的定义：
如果两个URL的协议（Protocol）、域名（Host）、端口（Port）完全相同，则视为同源。以下为例：

• https://example.com/page1 和 https://example.com/page2 ✅ 同源
• http://example.com 和 https://example.com ❌ 协议不同
• https://example.com 和 https://api.example.com ❌ 域名不同
• https://example.com:80 和 https://example.com:8080 ❌ 端口不同

同源策略的限制范围：

• Cookie、LocalStorage、IndexedDB 等存储的读取
• DOM 元素的访问（如iframe内容）
• AJAX 请求的响应（通过XMLHttpRequest或fetch发起）

二、跨域问题的产生场景

当前端页面与后端服务部署在不同域名或端口时，浏览器会拦截请求的响应。例如：

• 前端部署在 http://localhost:3000
• 后端API部署在 http://localhost:8000
  此时前端通过fetch请求后端接口，浏览器会报错：

Access to fetch at 'http://localhost:8000/api/data' from origin 'http://localhost:3000' has been blocked by CORS policy.

三、跨域解决方案详解

1. CORS（跨域资源共享）

CORS是W3C标准，需要后端配置响应头来允许特定源的访问。

简单请求（GET/POST/HEAD，Content-Type为text/plain、application/x-www-form-urlencoded或multipart/form-data）：
浏览器自动在请求头中添加Origin，后端需返回：

Access-Control-Allow-Origin: http://localhost:3000  // 或使用通配符 *

非简单请求（如PUT、DELETE或自定义头）：
浏览器会先发送预检请求（OPTIONS），检查服务器是否支持实际请求。后端需响应：

Access-Control-Allow-Origin: http://localhost:3000  
Access-Control-Allow-Methods: GET,POST,PUT  
Access-Control-Allow-Headers: Content-Type,Authorization  

2. JSONP（仅限GET请求）

利用<script>标签不受同源策略限制的特性，通过动态创建script标签发起请求：

function jsonp(url, callback) {
  const script = document.createElement('script');
  script.src = `${url}?callback=${callback}`;
  document.body.appendChild(script);
}

// 后端返回格式：callbackFunction({ data: "xxx" })

3. 代理服务器

在前后端之间增加一个同源的代理层，由代理转发请求：

• 开发环境：Webpack DevServer配置proxy：

  devServer: { proxy: { '/api': 'http://localhost:8000' } }
  

• 生产环境：使用Nginx反向代理：

  location /api { proxy_pass http://backend-server; }
  

4. 其他方案

• postMessage：用于跨窗口通信（如iframe之间）。
• document.domain：仅适用于主域相同、子域不同的场景。
• WebSocket：协议本身支持跨域。

四、实际应用建议

• 现代项目首选CORS，后端灵活控制允许的源和方法。
• 本地开发用代理避免CORS配置复杂度。
• 老旧浏览器兼容可考虑JSONP，但需注意安全性风险（如XSS）。

通过理解同源策略的原理和跨域解决方案的适用场景，可以更灵活地处理前端与后端服务之间的通信问题。