api 跨域解决方案

API跨域解决方案详解

什么是跨域问题？

同源策略（Same-Origin Policy）

浏览器安全机制,要求协议、域名、端口必须完全一致才允许交互。
示例：https://example.com 无法直接请求 http://api.example.com:8080。

主流跨域解决方案

CORS（跨域资源共享）

原理

服务器通过设置响应头,明确允许哪些域名跨域访问。

配置步骤（以Node.js/Express为例）

// 允许所有域名跨域（开发环境）
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "*");
  next();
});

优缺点

JSONP（JSON with Padding）

原理

通过<script>标签加载脚本，利用回调函数绕过同源限制。

实现示例

// 客户端
function handleResponse(data) {
  console.log(data);
}
const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);

优缺点

代理服务器（Proxy）

原理

前端请求本地服务器,由服务器转发请求到目标API，避开浏览器跨域限制。

实现示例（Nginx配置）

server {
  location /api/ {
    proxy_pass https://target-api.com/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

优缺点

PostMessage（跨窗口通信）

原理

不同域的iframe或窗口通过window.postMessage传递数据。

实现示例

// 发送方（domainA.com）
window.postMessage({ data: 'hello' }, 'https://domainB.com');
// 接收方（domainB.com）
window.addEventListener('message', (e) => {
  if (e.origin === 'https://domainA.com') {
    console.log(e.data); // { data: 'hello' }
  }
});

优缺点

WebSocket

原理

基于TCP的双向通信协议,无同源限制。

实现示例（客户端）

const socket = new WebSocket('wss://api.example.com/socket');
socket.onmessage = (event) => {
  console.log(event.data);
};

优缺点

方案对比总表

相关问题与解答

Q1：CORS配置后仍报错“Access-Control-Allow-Origin”怎么办？

A：

1. 检查服务器是否正确返回Access-Control-Allow-Origin头。
2. 如果使用预检请求（OPTIONS），确保服务器响应包含Access-Control-Allow-Methods和Access-Control-Allow-Headers。
3. 避免在生产环境使用通配符,改为指定具体域名。

Q2：JSONP是否安全？为什么推荐使用CORS替代？

A：

1. 不安全性：JSONP依赖<script>标签加载，无法校验响应内容，易受DNS劫持或数据篡改。
2. 功能限制：仅支持GET请求，无法处理复杂认证（如Cookie、Token）。
3. 替代优势：CORS通过HTTP头精准控制跨域权限，支持全请求类型和

到此，以上就是小编对于“api 跨域解决方案”的问题就介绍到这了，希望介绍的几点解答对大家有用，有任何问题和不懂的，欢迎各位朋友在评论区讨论，给我留言。