vue+springboot+nginx跨域问题解决方案

最近项目改版，前端使用了vue-elementui-admin模板，后端采用springboot，部署的话是使用nginx代理的；项目中最头痛的问题莫过于开发环境和生产环境的跨域问题了，下面列出我的解决方案：

首先配置vue.config.js文件，这是配置proxy做路径跳转，api和ams分别是项目的别名（注意：这里配置两个项目跳转路径还方便了有多个微服务的项目使用，不同的项目进行不同的配置即可），可以按照自己的喜好取，后面会讲到他们具体用在什么地方

 proxy: {
    '/api': {
      target: 'http://localhost:8091/',
      changeOrigin: true,
      ws:true,
      pathRewrite: {
        '^/api': ''
      }
    },
    '/ams': {
      target: 'http://localhost:8092/',
      changeOrigin: true,
      ws:true,
      pathRewrite: {
        '^/ams': ''
      }
    },
  },
  before: require('./mock/mock-server.js')
},

然后在src/util/request.js配置baseURL,这里我们配置"/"或者""都可以，意思是不在基础路径后面添加任何其他路径，若不存在多个微服务也可以在这里配置单个微服务的proxy里的别名例如"/api",那么其他请求接口里面就无需再做配置了

最后一步，配置每个请求的项目路径，在api包下面的每个需要发请求的地方配置

import request from '@/utils/request'


export function getRoutes(username) {
  return request({
    url: '/api/auth/loadRoutes',
    method: 'get',
    params: { "username":username }
  })
}

export function fetchList(query) {
  return request({
    url: '/ams/goods/queryGoods',
    method: 'get',
    params: query
  })
}

每个url的前面部分都是我们在vue.config.js里面进行配置的项目别名，springboot的后台的接口就只要配置项目别名后的路径即可

例如auth/loadRoute这个请求，后台controller是这样写的：

这样配置好了的话，我们开发环境的跨域问题就得到解决了，下面讲一下部署到服务器后的跨域解决方案。

我们使用的nginx部署vue项目（nginx安装与vue项目的打包还有springboot项目部署这里就不细说，网上方法很多），我这里用的是nginx1.16.1，在官网下载安装包即可，只需配置conf包下的nginx.conf文件即可，具体配置如下：

server {
        listen       9000;   //vue项目的访问端口
        server_name  localhost;//访问地址
		
        location / {
                root D:/tomcat/dist; //vue项目的部署路径
				index index.html index.htm;
        }
		
		 location ^~ /api/ {
            rewrite  ^/api/(.*)$ /$1 break;
			proxy_pass http://localhost:8091;	//api项目的访问地址，这里我的所有项目和nginx都是同一台服务器，若不同服务器请根据实际情况修改
		}
		
		location ^~ /ams/ {
            rewrite  ^/ams/(.*)$ /$1 break;		 
			proxy_pass http://localhost:8092;	 
		}

    }

至此，开发环境和生产环境的所有配置都OK了，把springboot项目，nginx启动起来，则可以正常访问了