API跨域由浏览器同源策略限制，需后端配置CORS响应头或搭建代理服务器解决，允许指定域名跨域
API跨域详解
跨域问题的本质
同源策略（Same-Origin Policy）
浏览器为保护用户安全，限制非同源页面间的资源访问。同源需满足以下条件：
- 协议（如
http/https） - 域名（如
example.com） - 端口（如
80/443）
跨域场景示例
| 场景类型 | 示例 | 是否跨域 |
|---|---|---|
| 前后端分离 | 前端 http://localhost:8080 请求后端 http://api.example.com |
是 |
| 第三方API | 站点调用 https://maps.googleapis.com |
是 |
| 子域名隔离 | a.example.com 请求 b.example.com |
是 |
跨域解决方案
CORS（跨域资源共享）
- 原理：服务器通过 HTTP 头声明允许跨域访问。
- 关键配置：
Access-Control-Allow-Origin：指定允许的域名（可写 允许所有）。Access-Control-Allow-Methods：允许的 HTTP 方法（如GET,POST）。Access-Control-Allow-Headers：允许的自定义请求头。
- 流程：
- 浏览器发送预检请求（OPTIONS）询问是否允许跨域。
- 服务器返回 CORS 头确认允许。
- 浏览器发送实际请求。
JSONP（JSON with Padding）
- 原理：通过
<script>标签加载数据,绕过同源限制。 - 限制：
- 仅支持
GET请求。 - 存在安全风险（如 CSRF 攻击）。
- 仅支持
- 示例代码：
function handleResponse(data) { console.log(data); } // 动态创建 script 标签 const script = document.createElement('script'); script.src = 'https://api.example.com/data?callback=handleResponse'; document.body.appendChild(script);
代理服务器（Proxy）
- 原理：通过同源服务器中转请求。
- 实现方式：
- 开发环境：使用 Webpack DevServer 或 Nginx 代理。
- 生产环境：部署反向代理（如 Nginx、Cloudflare）。
- 示例（Nginx配置）：
location /api/ { proxy_pass https://target-server.com/api/; proxy_set_header Host $host; }
跨域方案对比表
| 方案 | 适用场景 | 支持方法 | 安全性 | 兼容性 |
|---|---|---|---|---|
| CORS | 现代浏览器，标准 API 交互 | 全方法 | 高 | IE10+/现代浏览器 |
| JSONP | 仅 GET 请求，第三方脚本接口 | GET | 低 | 所有浏览器 |
| 代理服务器 | 开发调试，生产环境统一出口 | 全方法 | 中 | 依赖服务器配置 |
| PostMessage | 跨窗口/iframe 通信 | 高 | 现代浏览器 | |
| WebSocket | 长连接实时通信 | 高 | 现代浏览器 |
常见问题与解答
Q1：为什么POST请求也会触发跨域？
A：浏览器对所有非同源请求（无论GET/POST）均会检查跨域策略，若服务器未明确允许跨域,即使POST请求也会被拦截。
Q2：CORS配置后仍报错“No ‘Access-Control-Allow-Origin’ header”怎么办？
A：
- 检查服务器是否正确返回
Access-Control-Allow-Origin头。 - 确保响应头在预检请求（OPTIONS）和实际请求中均存在。
- 排查缓存问题，强制刷新（如按
Ctrl+F5
以上就是关于“api 跨域”的问题，朋友们可以点击主页了解更多内容，希望可以够帮助大家!
【版权声明】：本站内容若无意侵犯到您的权利，请及时与我们联系将尽快删除相关内容!
