哈喽各位前端小可爱们！今天咱们来聊聊一个让无数Vue开发者头秃的问题 —— 部署到服务器后遇到的跨域拦路虎。别担心，老司机这就带你飙车，保证不翻车！🚗💨

一、跨域是什么？为啥Vue部署后会遇到？

先来个灵魂拷问："跨域是啥？能吃吗？" 咳咳，不能吃，但能让你debug到怀疑人生！

跨域问题说白了就是浏览器的一个安全机制 —— 同源策略(Same-Origin Policy)。就像你家小区门禁，不允许陌生人随便进出一样。

举个栗子🌰：

- 你的Vue应用部署在 `https://www.myapp.com`

- 但API接口在 `https://api.otherapp.com`

- 这时候浏览器就会叉腰站在中间："不行！你们不是一个'小区'的！"

二、本地开发 vs 生产环境的区别

很多小伙伴在本地开发时美滋滋（因为用了vue-cli的proxy），一部署就傻眼了：

```javascript

// vue.config.js

devServer: {

proxy: {

'/api': {

target: 'http://your-api-server.com',

changeOrigin: true

}

}

}

```

注意啦！ 这个配置只在开发环境有效，生产环境就是个摆设！这就是为啥本地跑得好好的，上线就404的罪魁祸首。

三、5种实战解决方案（附代码）

方案1：后端大佬配合 - CORS大法

这是最优雅的解决方案，需要后端同学加几行代码：

```java

// Spring Boot示例

@Configuration

public class CorsConfig implements WebMvcConfigurer {

@Override

public void addCorsMappings(CorsRegistry registry) {

registry.addMapping("/**")

.allowedOrigins("*")

.allowedMethods("GET", "POST", "PUT", "DELETE")

.allowCredentials(true)

.maxAge(3600);

优点：前端啥都不用改

缺点：需要后端配合（可能得请后端喝奶茶☕）

方案2：Nginx反向代理 - 前端自己当黑客

```nginx

server {

listen 80;

server_name yourdomain.com;

location /api/ {

proxy_pass http://api-server.com/;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

这样所有 `/api` 请求都会被Nginx偷偷转发，浏览器完全不知情！

方案3：JSONP - 祖传手艺（不推荐）

虽然过时了，但面试可能会问：

function jsonp(url, callback) {

const script = document.createElement('script');

script.src = `${url}?callback=${callback}`;

document.body.appendChild(script);

// 使用

jsonp('http://other-domain.com/api', 'handleData');

缺点：只支持GET请求，安全性差

方案4：Webpack插件暴力破解（开发用）

configureWebpack: {

plugins: [

new webpack.ProvidePlugin({

'window.Quill': 'quill'

})

]

适合本地开发时临时解决问题，但别在生产环境用！

方案5：终极奥义 - HTTPS + Proxy

如果是HTTPS网站访问HTTP接口会被浏览器拦截：

listen 443 ssl;

ssl_certificate /path/to/cert.pem;

ssl_certificate_key /path/to/key.pem;

proxy_http_version 1.1;

proxy_set_header Upgrade $http_upgrade;

proxy_set_header Connection 'upgrade';

proxy_cache_bypass $http_upgrade;

四、常见踩坑现场

1. Cookie带不过去？

```nginx

proxy_cookie_domain api-server.com yourdomain.com;

```

2. OPTIONS请求报错？

```java

// Spring Security配置

http.cors().and().csrf().disable();

3. Vue Router的history模式404？

location / {

try_files $uri $uri/ /index.html;

}

五、性能优化小贴士

1. Nginx缓存静态资源

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {

expires max;

add_header Cache-Control "public, no-transform";

2. 开启Gzip压缩

gzip on;

gzip_types text/plain text/css application/json application/javascript text/xml;

六、

跨域问题就像前端的九九八十一难，但只要掌握正确姿势就能轻松通关。记住几个原则：

1. 开发环境：用vue-cli的proxy

2. 生产环境：

- 🥇首选CORS（需要后端配合）

- 🥈次选Nginx反向代理（前端自己搞定）

- 💣千万别用JSONP（除非对接古董系统）

最后送大家一张通关秘籍图：

++

| 浏览器请求 |

+-┬-+

|

+--v--+

| |

+--++ +--++

| CORS头已设置 | | Nginx反向代理 |

+--+ ++

下次再遇到跨域问题，就大声对电脑说："就这？" 💪

TAG:vue部署到服务器有跨域吗,vue部署到tomcat跨域问题,vue部署跨域解决方案,vue部署到服务器步骤,vue发布到服务器