本地跨域---->配置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{}下
    在这里插入图片描述
    在这里插入图片描述
Logo

前往低代码交流专区

更多推荐