跨域问题

约 505 字大约 2 分钟

2026-03-17

思考

为什么会产生跨域？
如何解决跨域问题？

为什么会产生跨域？

同源策略

浏览器的一种安全机制，限制一个源的文档/脚本如何与另一个源的资源交互。

同源定义： 协议 + 域名 + 端口完全相同

URL	是否同源	原因
`http://a.com/page1` → `http://a.com/page2`	✅ 同源	完全相同
`http://a.com` → `https://a.com`	❌ 跨域	协议不同
`http://a.com` → `http://b.com`	❌ 跨域	域名不同
`http://a.com:80` → `http://a.com:8080`	❌ 跨域	端口不同

跨域产生的场景

前端应用: http://localhost:3000 (Vue开发服务器)
    ↓ 请求
后端API: http://localhost:8080 (Spring Boot)
    ↓
浏览器阻止 因为端口不同(3000 ≠ 8080)

为什么需要这个限制？

如果没有同源策略：

恶意网站 evil.com 可以用你的 cookie 请求 bank.com/transfer
任意网站都有可能跨域访问你的资源

前端如何解决？

开发环境代理（Vue项目）

配置 vue.config.js：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',  // 后端地址
        changeOrigin: true,                // 允许跨域
        pathRewrite: { '^/api': '' }       // 去掉/api前缀
      }
    }
  }
}

使用：

// 请求 /api/users 实际代理到 http://localhost:8080/users
axios.get('/api/users')

原理：

浏览器 → localhost:3000/api/users → webpack-dev-server → localhost:8080/users
     ↑___________________________________________________________↓
                    浏览器认为是同域请求

生产环境 - Nginx反向代理

server {
    listen 80;
    server_name app.example.com;

    # 前端静态资源
    location / {
        root /usr/share/nginx/html;
        index index.html;
    }

    # API代理
    location /api {
        proxy_pass http://backend:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

效果：

前端访问 http://app.example.com/api/users
Nginx 转发到 http://backend:8080/users
浏览器视角：所有请求都是同域 app.example.com ✅

生产环境 - 后端开启CORS

Node.js/Express 示例：

const cors = require('cors')
app.use(cors({
  origin: 'https://app.example.com',
  credentials: true
}))

跨域是浏览器的安全策略。开发环境的代理配置不会被打包到生产环境。因此前端无法完全解决跨域问题，只能规避或借助服务端，生产环境跨域必须服务端配合。

开发环境：vue.config.js 代理，前端工具帮你中转
生产环境：必须 Nginx/后端/CORS

HTML

CSS

JavaScript

vue

react