✅ 一、后端设置 CORS（最正规、推荐）
这是标准解法，让服务端允许跨域访问。
Node.js（Express）
const express = require('express')
const cors = require('cors')
const app = express()
app.use(cors()) // 允许所有跨域
app.get('/api', (req, res) => {
res.json({ msg: 'ok' })
})
app.listen(3000)
或者手动设置：
res.setHeader('Access-Control-Allow-Origin', '*')
res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE')
res.setHeader('Access-Control-Allow-Headers', 'Content-Type')
✅ 二、前端代理（开发环境最常用）
你做 React / Vue 项目，这个你一定会用到。
👉 Vite
// vite.config.js
export default {
server: {
proxy: {
'/api': {
target: 'http://backend.com',
changeOrigin: true,
rewrite: path => path.replace(/^/api/, '')
}
}
}
}
👉 Vue CLI
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://backend.com',
changeOrigin: true
}
}
}
}
👉 React（Create React App）
"proxy": "http://backend.com"
👉 原理：
本地 dev server 帮你转发请求 → 浏览器以为是同源
✅ 三、Nginx 反向代理（生产环境常用）
server {
listen 80;
location /api/ {
proxy_pass http://backend.com/;
}
}
👉 前端请求：
/api/user
👉 实际转发：
http://backend.com/user
✅ 四、JSONP（只支持 GET，基本淘汰）
function jsonp(url) {
const script = document.createElement('script')
script.src = url
document.body.appendChild(script)
}
👉 缺点：
- 只能 GET
- 安全性差
👉 现在几乎不用
✅ 五、浏览器插件（仅开发调试）
比如 Chrome 插件关闭 CORS
👉 适合：
- 本地调试
👉 不可用于生产
❗ 六、为什么会出现跨域（面试重点）
浏览器会校验：
| 条件 | 示例 |
|---|---|
| 协议不同 | http vs https |
| 域名不同 | a.com vs b.com |
| 端口不同 | 3000 vs 8080 |
🚨 七、预检请求（OPTIONS）
复杂请求会先发一个：
OPTIONS /api
后端必须允许：
Access-Control-Allow-Methods
Access-Control-Allow-Headers
🧠 实战建议（结合你项目）
你现在做 React + Vue 项目：
👉 开发环境：
- 用 proxy（最方便）
👉 生产环境：
- 用 Nginx 反向代理
- 或 后端 CORS
👉 后端可控：
- 直接开 CORS（最佳）
👍 一句话总结
👉 跨域不是前端 bug，是浏览器安全机制
👉 解决核心：让服务器“允许你访问” 或 “绕过浏览器同源限制”
