跨域问题如何解决？

✅ 一、后端设置 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，是浏览器安全机制

👉 解决核心：让服务器"允许你访问" 或 "绕过浏览器同源限制"