前端跨域很常见,最近用vue做项目,用webpack中的代理跨域proxyTable解决,非常完美。所以进行总结一下,避免自己遇到类似的问题。

我们先找到项目中的config目录下面的index.js,如下图所示


然后在index.js中写入下面的代码,进行代理处理

module.exports = {
  dev: {
    proxyTable: {
      '/getClubItems': {
        target: 'https://www.exaple.com',  // 接口域名
        secure: false,  // 如果是https接口,需要配置这个参数
        changeOrigin: true,  //是否跨域
        pathRewrite: {
          '^/apis': ''   //需要rewrite的,
        }
      }
    }
}
然后我们最终就会代理到这个地址,我们在本地可以进行访问
https://www.exaple.com

然后我们在使用的时候,可以这样使用

goodsGetFirst: (obj) => {
    return get('/getClubItems', obj)
},
上面的代码是对axios的二次封装,大家可以不用理会。我们在config目录下面的index.js写了
/getClubItems
而我们使用的时候,就是直接用‘/getClubItems/obj’,这里的obj你可以写,你后面需要跟的路径,或者参数,这样我们就再也不用担心跨域的问题了。




Logo

前往低代码交流专区

更多推荐