VUE+Springboot项目使用反向代理实现跨域请求的两种方式

方法1：

利用vue-cli自带的反向代理配置proxyTable，在modules.export中配置如下：

proxyTable: {
      '/api': {
        target: 'http://localhost:8080',// 请换成你的后端ip地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }

前台利用axios发送ajax请求方法为：

this.$axios({ url: '/getUser',method: 'get',baseURL:'/api'}).then(res=>{
          console.log(res.data);});

或者

this.$axios.get("api/getUser").then(res=>{
          console.log(res.data);
        })

这个设置的方法来自于vue-cli使用的模板插件 vuejs-templates，其作用相当于在本地部署了一个反向代理服务器解决跨域问题，文档里有说明和实例

vuejs-templates官方文档

值得注意的是，方法1只能在开发时使用。

方法2：

前端项目用反向代理工具nginx部署启动，配合nginx的反向代理配置实现跨域访问。

1. 前端项目的build

命令行进入项目根目录下，运行命令：

npm  run build

将打包生成dist目录. 

2. nginx的配置

server {
        listen       8081; //监听端口，因为我再本地8080部署后端，故用8081
        server_name  localhost 10.45.145.192;


        #charset koi8-r;


        #access_log  logs/host.access.log  main;


        location / {#/表示匹配访问根目录
            #root   html;#用于指定访问根目录时，访问虚拟主机的web目录
	    root D:/VueDemoSites/mi-shop-master/dist; #vue项目build的dist目录
            index  index.html index.htm;#在不指定访问具体资源时，默认展示的资源文件列表
        }
        location /api {
           rewrite  ^.+api/?(.*)$ /$1 break;
           include  uwsgi_params;
           proxy_pass   http://localhost:8080;//后端部署ip：端口
       }

以上分别为root和前台ajax请求发起时映射的后端ip和端口配置。

ajax请求方式如方法1，启动nginx，用配置的监听端口浏览器访问web，同样可以实现跨域访问。并且可以同时配置多个服务器地址。