vue项目本地跨域、线上跨域、本地链接线上地址跨域、https站点使用ws协议跨域问题解决

本地跨域---->配置vue.config.js

• .env.development文件

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = '/info'

• request.js的部分代码

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  timeout: 50000 // request timeout
})

• vue.config.js

devServer{
	proxy:{
		'/info':{
        target:"http://116.62.202.57:6013",
        //ecure: false, // 如果是https接口，需要配置这个参数
        changeOrigin:true,
        pathRewrite:{
          '^/info': ''  //需要rewrite的,
        },
      },
	}
}

注意这个proxy的名字，最好不要起/api 这种，如果你只配一个代理，那没关系，如果多了之后，可能会因为匹配的原因，他进入了不同的proxy，导致跨域配置不生效，其实写的是对的，但是因为名字问题，导致跨域不生效，问题还不好找。我之前就被坑过

当界面调用接口的时候一般是http://localhost:9528/info/xx路径，当他匹配到/info的时候会走(反向代理到)http://116.62.202.57:6013。如果你是本地调试线上接口，把targer换成线上地址即可。

线上跨域---->配置nginx

nginx转发http协议

1. nginx.config.js server{}下
   
   被马赛克应该是要被nginx转发的地址
2. aixos拦截器文件
   
   被马赛克的应该是线上地址 /automat 是nginx配置的名字
   当他匹配到/automat nginx就会就会走 proxy_pass所配置的地址

nginx转发ws协议

为什么要转发ws协议？

因为我们项目的站点是https的，用的mqtt进行及时通讯，但是后端给我链接mqtt的链接是ws的，在https的站点下使用ws是不被允许的，需要wss才可以，才需要nginx转发ws协议，来避免这个问题。配置如下

1. http{}下
   
2. server{}下