前端必备小知识--跨域

跨域是指浏览器出于安全考虑，限制从一个源（origin）加载的文档或脚本与来自另一个源的资源进行交互。这是浏览器的同源策略（Same-Origin Policy）所导致的。

m0_62606428

804人浏览 · 2025-06-05 14:29:20

m0_62606428 · 2025-06-05 14:29:20 发布

同源策略

同源策略要求以下三个必须相同：

协议（http/https）
域名
端口号

例如：

http://example.com 和 https://example.com → 不同源（协议不同）
http://example.com 和 http://api.example.com → 不同源（域名不同）

Q&A

检查一个 HTTP 请求是否涉及跨域问题

1. 浏览器开发者工具（推荐）

打开开发者工具：
- Chrome/Edge/Firefox：按 F12 或 Ctrl + Shift + I（Windows/Linux），Cmd + Opt + I（Mac）。
- Safari：需先启用开发者模式（Preferences → Advanced → Show Develop menu），然后按 Cmd + Opt + I。
切换到 Network（网络）标签页，刷新页面或触发请求。

查看请求的响应头：

找到目标请求（通常是 XHR 或 Fetch 类型）。

检查 响应头（Response Headers） 是否包含：

Access-Control-Allow-Origin: *

或

Access-Control-Allow-Origin: https://yourdomain.com

如果没有这些头，浏览器会阻止跨域请求，并在 Console（控制台） 显示类似错误：

Access to fetch at 'https://api.example.com/data' from origin 'https://yourdomain.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

检查 OPTIONS 预检请求（Preflight Request）（如果适用）：
- 某些复杂请求（如带 Content-Type: application/json 或自定义头的请求）会先发送 OPTIONS 请求。
- 如果 OPTIONS 请求返回 403 或缺少 Access-Control-Allow-* 头，说明跨域被阻止

2. 使用 `curl` 或 `Postman` 测试

方法 1：`curl` 检查响应头

curl -I -X OPTIONS https://api.example.com/data

或

curl -I https://api.example.com/data

检查返回的 HTTP Headers 是否包含：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type

方法 2：Postman 测试

在 Postman 中发送请求。
查看 Headers 选项卡，检查是否有 Access-Control-Allow-Origin。
Postman 不会触发 CORS 限制（因为它是工具，不是浏览器），但可以手动检查服务器返回的 CORS 头。

3. 前端代码检查

如果请求是前端发出的，可以在 fetch 或 axios 请求中捕获错误：

在浏览器中可以通过一下下方式，复制当前请求的fetch(选择复制为fetch Node.js)，粘贴在浏览器的控制台中，查看显示输出

示例（Fetch API）

fetch("https://xxx", {
  "headers": {
    "accept": "application/json, text/plain, */*",
    "accept-language": "zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6,zh-TW;q=0.5",
    "sec-ch-ua": "\"Microsoft Edge\";v=\"137\", \"Chromium\";v=\"137\", \"Not/A)Brand\";v=\"24\"",
    "sec-ch-ua-mobile": "?0",
    "sec-ch-ua-platform": "\"Windows\"",
    "sec-fetch-dest": "empty",
    "sec-fetch-mode": "cors",
    "sec-fetch-site": "same-site",
    "Referer": "https://xxx.com/",
    "Referrer-Policy": "strict-origin-when-cross-origin"
  },
  "body": null,
  "method": "GET"
});

如果想查看更多详细的输出，可以用以下代码：

fetch('https://xxx', {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json'
    },
})
.then((response) => {
  console.log('HTTP Status:', response.status) // 打印状态码
  if (!response.ok) throw new Error('HTTP error: ' + response.status)
  return response.json()
})
.then((data) => console.log('Response Data:', data)) // 成功响应
.catch((error) => console.error('Request Failed:', error)) // 失败详情

如果跨域被阻止，控制台会报错：

Failed to load https://xxx.com/data: No 'Access-Control-Allow-Origin' header is present.

控制台正常情况下，为以下输出：

4.如何解决跨域问题？

如果发现跨域被阻止，可以：

后端设置 CORS 头（推荐）：
```
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type
```
（具体配置方式取决于后端框架，如 Node.js/Express、Django、Spring Boot 等。）
前端代理（适用于开发环境）：
- 在 vite.config.js / webpack.config.js 中配置代理：
```
server: {
  proxy: {
    '/api': 'http://api.example.com',
  },
}
```
- 或使用 nginx 反向代理。
JSONP（仅限 GET 请求，不推荐）。

前端直接去发送请求，不是因为不同源问题导致跨域吗？

答：跨域请求的本质是：浏览器的请求能正常发送到服务器，服务器也能正常处理并返回数据，但浏览器会根据服务器的响应头决定是否允许前端 JavaScript 代码访问返回的数据。 前端直接发送跨域请求时，浏览器会因“同源策略”（Same-Origin Policy）拦截请求，这是浏览器的安全机制。但跨域问题（CORS）的本质是服务端未正确配置响应头，导致浏览器拒绝前端访问响应数据。