proxy 跨域配置, 针对有axios的baseURL

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了proxy 跨域配置, 针对有axios的baseURL相关的知识,希望对你有一定的参考价值。

1.首先主要的config文件下的index.js中的proxytable配置
proxyTable:{


  '/proxy': {

    target:'http://192.168.2.141:8080', 

    changeOrigin:true,

    pathRewrite: {
      '^/proxy': ''
    }
  }
}
//proxy这个词可以任意换,但文下的词要一致

2.config下的dev.env.js中配置base_api,即与上文对应的proxy


module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API: '"/proxy"'
})

//这里是开发模式下的配置,产品模式到prod.env.js中配置

3.axios中的全局设置配置


axios.defaults.baseURL = process.env.BASE_API;

4.请求的时候,例如我现在需要请求 http://192.168.2.141:8080/WX/shopCart/findShopCartList 这个接口,这样写就行了 ↓


getData(){
        this.axios({
          method:'post',
          url:'/WX/shopCart/findShopCartList',
          data:{
           
          }

        }).then(res=>{
            console.log(res,'返回的数据')
        }

好了大功告成!

原文地址:https://segmentfault.com/a/1190000016904287


以上是关于proxy 跨域配置, 针对有axios的baseURL的主要内容,如果未能解决你的问题,请参考以下文章

Webpack 配置 proxy 代理解决跨域问题

在vue项目中配置proxy解决跨域问题

使用axios以及http-proxy-middleware代理处理跨域的问题

Vue-创建axios实例并实现跨域请求(完整过程-前端)

axios踩坑记录+拦截器使用+vue cli代理跨域proxy

React axios 使用 http-proxy-middleware 解决跨域问题小记