webpack跨域代理。一个例子和可以下载的文档

可以在这里下载

首先我新建了一个config.js的文件把域名写在这个文件里。这样所有页面想用的时候直接引入这个文件就可以拿到。当前修改的时候只要修改这个文件就好了。不用到处定义导致的修改时到处找使用到域名的地方。

要在config-index.js引入这个域名

import cf from 'config的相对位置'     //下面就可以使用cf.apiurl当做域名啦。下面截图我用的config作为文件重命名的。所以也就直接通过config.apiurl

然后再dev下面添加

 proxyTable: {

      "/api": {

         target: config.apiurl,

         changeOrigin: true,

         pathRewrite: {

            "^/api": "/"

         }

       }

   }

发现这样写完以后报错了

意思是这里不能使用import来引入。于是我们换一个require就行了

最后在接口调用的里面

if (config.dev) {//webpack 跨域 代理

  base = "/api/";

}

我下面的例子是使用的axios调用接口的。

然后我们可以看到在访问接口的时候

接口访问成功了。

如果我们直接访问接口，也就是把api.js里面的if (config.dev) 这个去掉。然后我们再去访问试试。你看下面跨域了。证明我们跨域代理使用的是正确的啦。

如果出现跨域其实也可以让后端直接改接口加上一些设置就可以了。但是如果不麻烦后端前端去处理的话，就是使用跨域代理啦。