vue项目跨域问题（图片跨域）devServer.proxy代理失效时，nginx反向代理解决跨域问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue项目跨域问题（图片跨域）devServer.proxy代理失效时，nginx反向代理解决跨域问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

本篇文章主要记录个人在公司项目开发中所遇问题，主要内容：在vue项目的开发中图片所存的服务器/端口号和项目所在的服务器/端口号不同，出现了跨域问题的保错。

如果文章有歧义，请各位大佬指出，避免误导更多的人！！

正文

Bug起因

在vue项目的开发中图片所存的服务器/端口号和项目所在的服务器/端口号不同，在设置背景图片时出现了跨域问题的保错。
vue 图片跨域,vue日常开发问题,vue.js,nginx,前端,anti-design-vue,vue

Vue项目解决跨域问题

1. 可以通过 vue.config.js 中的 devServer.proxy 选项来配置请求代理。（vue打包部署时代理失效）

devServer: {
    // development server port 8000
    port: 8000,
    // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
    proxy: {
      '/api': {
        target: 'http://1xx.1xx.1.xx:8080/api',
        ws: false,
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      },
      // 解决图片跨域问题（api请求时注意使用/upload开头）
      '/upload': { // 前端项目要被代理的路径
        target: 'http://1xx.1xx.1.xx:8083', // 真正的图片路径
        changeOrigin: true, //表示是否改变原域名
        ws: true, //表示WebSocket协议
        pathRewirte: {
          // 这里是追加链接,比如真实接口/请求路径里包含了 /upload,就需要这样配置.
          '^/upload': ''
        }
      }
    }
  }

很明显 devServer的配置主要针对vue项目本地开发环境时的跨域代理配置；当vue前端项目打包部署后，会成为单独的静态资源，前端框架中所配置服务器跨域代理将不起作用；资源要被访问，那必然还是需要有另一个 web 服务器来装载它，这个服务器常见的就是nginx。

2.nginx服务器反向代理来解决vue项目打包后的跨域问题。

找到vue前端打包后所部署的nginx服务其下的配置文件nginx.conf。

如下代码：使用当前服务器的其他端口路径代理8080端口下的（/api 和 /upload）文章来源地址https://www.toymoban.com/news/detail-607670.html

server {
        listen       8080;
        server_name  localhost;
        root   /usr/local/nginx/html/dist;
        index  index.html index.html;
        
        location /{
            root   /usr/local/nginx/html/dist;
            try_files $uri $uri/ /index.html;
            index  index.html index.html;
        }
    	## 配置反向代理,解决跨域问题 
        location /api/ {
            proxy_pass http://127.0.0.1:8081; ## 真实的后端接口路径
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_connect_timeout 5;
        }
        location /upload/ {
            proxy_pass http://127.0.0.1:8083; ## 真实的图片请求路径
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_connect_timeout 5;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
 }