跨域及解决方案

跨域（Cross-Origin）是指浏览器在执行 JavaScript 的时候，因为同源策略（Same-Origin Policy）的限制，阻止了一个网页去请求不同源（域名、端口、协议有任意一个不同）的资源。

1. 什么是同源策略？

• 同源指：
  • 协议（http / https）
  • 域名（www.example.com / api.example.com）
  • 端口（80 / 8080）
• 必须全部相同才算同源。
• 只要有一个不同，就算跨域。

例子：

当前页面地址：http://www.a.com:8080
以下都是跨域：
1. http://www.b.com:8080    // 不同域名
2. https://www.a.com:8080   // 不同协议
3. http://www.a.com:8081    // 不同端口

2. 跨域是如何造成的？

• 跨域的根本原因是浏览器的安全限制。
• 浏览器为了防止恶意网站窃取数据，不允许前端脚本直接读取其他源的响应数据。

注意：跨域限制只存在于浏览器端的 Ajax/Fetch 请求，后端请求（比如 Node.js 调用接口）是没有跨域限制的。

3. 前端开发常见跨域解决方案

• 方案 1：CORS（最常用）
  • 核心原理：后端在响应头中加 Access-Control-Allow-Origin 等字段，告诉浏览器允许该域访问。

示例：

Access-Control-Allow-Origin: http://www.a.com
Access-Control-Allow-Methods: GET,POST,PUT,DELETE
Access-Control-Allow-Headers: Content-Type

• 优点：标准、安全、灵活。
• 缺点：需要后端配合。

• 方案 2：JSONP（老旧方法，只支持 GET）
  • 原理：利用 <script>标签不受同源策略限制的特性，通过回调函数接收数据。

示例：

<script src="http://api.b.com/data?callback=handleData"></script>
<script>
function handleData(data) {
    console.log(data);
}
</script>

• 优点：简单，不需要改浏览器。
• 缺点：只能 GET，请求安全性低，现在基本淘汰。

• 方案 3：反向代理（本地开发常用）
  • 原理：在本地开发服务器（如 Webpack devServer、Vite、Nginx）配置代理，把请求转发到后端，避开浏览器跨域限制。

示例（vite.config.js）：

export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://backend.com',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
}

示例（Nginx加 CORS 响应头）：

server {
    listen 80;
    server_name www.example.com;

    location /api/ {
        proxy_pass http://api.example.com/;
        
        # 添加 CORS 头
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'Origin, Content-Type, Accept, Authorization';
        
        # 预检请求（OPTIONS）直接返回
        if ($request_method = OPTIONS) {
            return 204;
        }
    }
}

• 注意：
  • proxy_pass 后面是否有 / 很重要：
    • proxy_pass http://api.example.com/; → /api/user → http://api.example.com/user
    • proxy_pass http://api.example.com; → /api/user → http://api.example.com/api/user

• 方案 4：PostMessage / iframe
  • 原理：如果需要跨域页面之间通信，可以用 window.postMessage。
  • 用途：跨域 iframe、跨窗口通信。

• 方案 5：跨域资源共享（特殊标签）
  • <img>, <script>, <link> 天生可以跨域加载资源，但不能直接获取内容（除非设置 CORS）。

• 方案 6：同源策略的“放宽”
  • 修改浏览器配置（比如 Chrome 启动参数 --disable-web-security），但只建议本地调试，生产不可用。