其他分享
首页 > 其他分享> > vue访问外部接口设置代理,解决跨域(vue-cli3.0)

vue访问外部接口设置代理,解决跨域(vue-cli3.0)

作者:互联网

vue-cli3.0搭建的项目,平时访问内部接口配置了拦截器,今天需要调用天气预报的外部接口,发现跨域问题,通过配置代理解决。

1、在vue.config.js中配置代理

module.exports = {
  devServer: {
    proxy: { // 为天气接口配置代理,解决跨域
      '/proxy/': {
        'target': 'https://www.tianqiapi.com', //天气接口地址
        'secure': false, // false为http访问,true为https访问
        'changeOrigin': true, // 跨域访问设置,true代表跨域
        'pathRewrite': { // 路径改写规则
          '^/proxy': '' // 以/proxy/为开头的改写为''
        }
      }
    }
  }
}

2、然后使用axios调用接口,检测到'/proxy'会替代为https://www.tianqiapi.com,这里实际访问到的接口就是https://www.tianqiapi.com/api,加上参数完整的就是:

https://www.tianqiapi.com/api/?version=v6&cityid=XXX&appid=XXX&appsecret=XXX

axios.get('/proxy/api', { // 这里会匹配到前面我们设置的/proxy,代替为https://www.tianqiapi.com
    params: {
        version: 'v6',
        cityid: XXX,
        appid: XXX,
        appsecret: 'XXX'
    }
}).then(function (response) {
    console.log(response)
}).catch(function (error) {
    console.log(error)
})

3、可以访问了

 

标签:www,vue,跨域,XXX,接口,cli3.0,proxy,https
来源: https://www.cnblogs.com/mahao1993/p/11596478.html