当前位置：首页 > news >正文

跨域及解决方案

news 2025/8/15 12:10:44

跨域（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