前端跨域难题终结者：从JSONP到CORS，一文搞定所有跨域问题！

2025年还在被跨域问题困扰？这篇文章让你彻底告别跨域烦恼！

前言：为什么会有跨域这个"坑"？

记得我刚学前端时，第一次遇到跨域问题，整个人都懵了。明明后端API已经调通了，前端代码也没问题，可浏览器就是报错：

csharp 复制代码

Access to fetch at 'http://api.example.com' from origin 'http://localhost:3000' 
has been blocked by CORS policy...

相信很多前端开发者都经历过这种绝望。但别担心，今天我就带你彻底攻克这个前端开发中的"经典难题"！

什么是跨域？为什么浏览器要限制它？

跨域指的是浏览器不能执行其他网站脚本的安全限制。它是由同源策略引起的------只要协议、域名、端口有一个不同，就会被认定为跨域。

浏览器为什么要这么做？ 主要是为了安全！防止恶意网站窃取数据、伪造身份等。但这也给我们正当的开发工作带来了麻烦。

解决方案一：JSONP - 老牌跨域利器

原理揭秘

JSONP（JSON with Padding）利用了<script>标签的一个特性：它的src属性不受同源策略限制。聪明的前端开发者们就想到了一个绝妙的方法：

javascript 复制代码

// 前端代码 - 埋下一个全局函数
function handleData(data) {
    console.log('收到数据:', data);
}

// 动态创建script标签
const script = document.createElement('script');
script.src = 'http://api.example.com/data?callback=handleData';
document.body.appendChild(script);

javascript 复制代码

// 后端配合 - 返回函数调用
handleData({
    name: "小明",
    age: 25,
    message: "我不爱你"
});

优缺点分析

优点：

兼容性极好，支持老版本浏览器
简单易用，不需要复杂配置

缺点：

只支持GET请求（毕竟是URL参数）
需要后端专门支持
安全性较差，容易受到XSS攻击

解决方案二：CORS - 现代跨域标准方案

简单请求：轻松搞定

对于简单请求（GET、POST、HEAD，且Content-Type为text/plain、multipart/form-data或application/x-www-form-urlencoded），只需后端设置一个响应头：

javascript 复制代码

// 后端Node.js示例
app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*'); // 允许所有域名
    // 或者指定特定域名
    // res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
    next();
});

复杂请求：预检机制

当你使用PUT、DELETE方法，或者发送application/json内容时，浏览器会先发送一个OPTIONS预检请求：

javascript 复制代码

// 前端发起复杂请求
fetch('http://api.example.com/data', {
    method: 'PUT',
    headers: {
        'Content-Type': 'application/json',
        'X-Custom-Header': 'value'
    },
    body: JSON.stringify({ data: 'test' })
});

这时后端需要正确处理OPTIONS请求：

javascript 复制代码

// 后端完整CORS配置
app.use((req, res, next) => {
    // 允许的域名
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
    
    // 允许的方法
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    
    // 允许的头部
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Custom-Header');
    
    // 允许携带cookie
    res.setHeader('Access-Control-Allow-Credentials', 'true');
    
    // 处理预检请求
    if (req.method === 'OPTIONS') {
        return res.status(200).end();
    }
    
    next();
});

实战对比：JSONP vs CORS

特性	JSONP	CORS
请求方法	仅GET	所有HTTP方法
数据格式	只能返回JS	支持任何格式
安全性	较低	较高
后端改造	需要	需要
浏览器支持	所有浏览器	IE10+
使用复杂度	简单	中等

其他跨域方案锦囊

1. 开发环境代理

在开发阶段，使用webpack-dev-server或Vite的代理功能：

javascript 复制代码

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

2. Nginx反向代理

生产环境中，使用Nginx作为反向代理：

nginx 复制代码

server {
    listen 80;
    server_name localhost;
    
    location /api/ {
        proxy_pass http://api.example.com/;
        add_header Access-Control-Allow-Origin *;
    }
}

3. postMessage跨文档通信

适用于iframe之间的通信：

javascript 复制代码

// 父页面
window.frames[0].postMessage('Hello', 'http://child-domain.com');

// 子页面
window.addEventListener('message', (event) => {
    if (event.origin !== 'http://parent-domain.com') return;
    console.log('收到消息:', event.data);
});

真实场景选择指南

老项目维护：JSONP（兼容性好）
现代Web应用：CORS（功能强大）
本地开发：开发代理（方便快捷）
生产环境：Nginx反向代理（性能优秀）

结语

跨域问题看似复杂，但一旦掌握了其中的原理和解决方案，就能游刃有余地应对各种场景。现在CORS已经成为主流方案，JSONP逐渐退出历史舞台，但在某些特殊场景下仍然有用武之地。

希望这篇文章能帮你彻底解决跨域问题！如果你有更好的方案或者遇到特殊问题，欢迎在评论区分享讨论~

转发这篇文章，让你身边的前端小伙伴也告别跨域烦恼！

互动话题： 你在项目中遇到过最奇葩的跨域问题是什么？是怎么解决的？欢迎在评论区分享你的故事！