vue项目开发之proxyTable 解决开发环境的跨域

在实际项目开发过程中vue cli自带的服务器，但是我们实际要去请求我们的数据接口，服务器与服务器之间产生了一个代理跨域问题，我们需要修改自带服务的配置。在config 中的index文件中，有一个proxyTable参数

参数修改如下：

proxyTable: {
  '/list': {
    target: 'http://xxx.xxx.com/xxx/6',
    pathRewrite: {
      '^/list': '/'
    }
  }
},

如果需要跨域那么需要加上参数changeOrigin:true

proxyTable: {
  '/list': {
    target: 'http://xxx.xxx.com/xxx/6',

changeOrigin:true,
    pathRewrite: {
      '^/list': '/'
    }
  }
},

请求过程就需要这样写

//账号登陆提交

submitForm:function (formName) {
  var info={
    user_phone: this.info.username,
    user_pwd: this.info.password,
    verify_code: this.info.password
  }
  var  that=this;
    this.$http.post('/list/login',info).then(function (res) {
        console.log(res.data)
          if(res.data.code==2000){
              this.$router.push({ path: 'OrderTracking'})

          }else (res.data.code==4000){
                alert("登陆失败")
          }   

 })
}

项目上线时后台配置

#商家管理员端
server {
        listen       80;
		server_name  xxxx.xxxx.xxxx.com;
		#社区端
		location /list/ {
			proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Nginx-Proxy true;
            proxy_set_header Connection "";
			proxy_pass https://api.xxxx.xxx.com/seller/;
		}
		location /ui/ {
			proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Nginx-Proxy true;
            proxy_set_header Connection "";
			proxy_pass https://api.xxxx.xxx.com/public/;
		}
		location / {
			root   /www/xxx/xxx;
			index  index.html index.htm;
		}
    }