文章目录

前言

一、跨域问题的本质

1.什么是跨域？

2.错误示例

3.同源策略的意义

二、Vue开发环境解决方案

Webpack代理（推荐）

三、Vue生产环境解决方案（打包）

Nginx反向代理（推荐）

四、总结

---

前言

在前后端分离的开发模式中，前端（如Vue项目）与后端API服务通常运行在不同的域名或端口下。此时，前端请求后端接口时，浏览器会因同源策略（Same-Origin Policy）的限制而触发跨域问题。本文将深入分析跨域问题的根源，并结合Vue项目提供解决方案。

---

一、跨域问题的本质

1.什么是跨域？

当请求的协议（HTTP/HTTPS）、域名（如 example.com）或端口（如 8080）中任意一项与当前页面不一致时，浏览器会判定为跨域请求，默认禁止响应数据交互。

2.错误示例

Vue项目运行在 http://localhost:8080，请求后端接口 http://api.example.com:3000/data，浏览器会报错：

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

3.同源策略的意义

防止恶意网站窃取用户数据，但合法场景下需通过技术手段绕过限制。 

二、Vue开发环境解决方案

Webpack代理（推荐）

Vue CLI内置了Webpack DevServer的代理功能，适用于开发环境，将前端请求转发至后端服务，避开浏览器跨域限制。

配置步骤：

1.在项目根目录的 vue.config.js 中添加：

    proxy: {
      '/api': {  // 匹配以/api开头的请求路径
        target: 'http://api.example.com:3000',  // 目标服务器地址
        changeOrigin: true,  // 修改请求头中的Origin为目标地址
        pathRewrite: {
          '^/api': ''  // 重写路径：移除/api前缀
        }
      }
    }

2.前端代码中发起请求： 

axios.get('/api/data').then(response => {
  console.log(response.data);
});

3.重启开发服务器，请求将被代理至 http://api.example.com:3000/data。

三、Vue生产环境解决方案（打包）

Nginx反向代理（推荐）

通过Nginx配置统一代理前端页面和API请求，使前后端处于同源下。

在  nginx-->conf-->nginx.conf  中配置：

server {
  listen 8080;
  server_name localhost;

  # 代理前端静态资源
  location / {
    root /var/www/vue-project;
    index index.html;
  }

  # 代理API请求
  location /api/ {
    proxy_pass http://api.example.com:3000/;
  }
}

四、总结

跨域是浏览器行为，解决方案需从前端工具链、服务器代理或后端协作多角度入手。选择时需综合考虑开发效率、安全性和部署成本。