什么是跨域？在 Vue 项目中你是如何解决跨域问题的？

最后更新：1/13/2026

AI 助手

会员专享功能

只有会员才能使用 AI 生成答案功能。 立即升级

Other Answers (1)

Generated by DeepSeek V3

跨域问题及Vue项目中的解决方案

什么是跨域？

跨域(Cross-Origin)是由于浏览器的同源策略(Same-Origin Policy)限制而产生的安全机制。当协议(protocol)、域名(domain)或端口(port)三者中有任何一个不同时，就会产生跨域问题。

同源策略限制以下行为：

  • AJAX请求不能发送
  • DOM无法获得
  • Cookie、LocalStorage和IndexDB无法读取

Vue项目中解决跨域的常用方法

1. 开发环境解决方案

1.1 使用Vue CLI代理

在vue.config.js中配置proxy：

javascript 
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://your-backend-server.com', // 目标服务器地址
        changeOrigin: true, // 是否改变源
        pathRewrite: {
          '^/api': '' // 路径重写
        }
      }
    }
  }
}

使用时：

javascript 
axios.get('/api/user') // 实际请求会被代理到 http://your-backend-server.com/user

1.2 使用CORS (Cross-Origin Resource Sharing)

后端设置响应头：

javascript 
// Node.js Express示例
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*') // 允许所有源
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE')
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization')
  next()
})

2. 生产环境解决方案

2.1 Nginx反向代理

nginx 
server {
    listen       80;
    server_name  your-domain.com;

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

2.2 后端设置CORS

与前文类似，但应该限制允许的源：

javascript 
res.header('Access-Control-Allow-Origin', 'https://your-frontend-domain.com')

3. 其他解决方案

3.1 JSONP (仅限GET请求)

javascript 
function jsonp(url, callback) {
  const script = document.createElement('script')
  script.src = `${url}?callback=${callback}`
  document.body.appendChild(script)
}

// 使用
jsonp('http://example.com/api/data', 'handleData')

function handleData(data) {
  console.log(data)
}

3.2 WebSocket

WebSocket不受同源策略限制：

javascript 
const socket = new WebSocket('ws://your-backend-server.com')

注意事项

  1. 开发环境使用proxy仅用于开发调试，不会影响生产环境打包
  2. 生产环境推荐使用Nginx反向代理或后端设置CORS
  3. 设置CORS时应注意安全性，不要简单设置为*
  4. JSONP只支持GET请求且安全性较差，现代项目已较少使用

选择哪种方案取决于项目需求、团队技术栈和安全要求。