VueJs 将接口用webpack代理到本地的方法

// 配置API接口地址

var root = 'https://cnodejs.org/api/v1' 

// Paths

assetsSubDirectory: 'static',

assetsPublicPath: '/',

proxyTable: {},

 

// Various Dev Server settings

host: 'localhost', // can be overwritten by process.env.HOST

port: 8080, // can be overwritten by process.env.HOST, if port is in use, a free one will be determined

autoOpenBrowser: false,

errorOverlay: true,

notifyOnErrors: true,

poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

 

// Use Eslint Loader"htmlcode">

proxyTable: {

  '/api/v1/**': {

    target: 'https://cnodejs.org', // 你接口的域名

    secure: false,

    changeOrigin: false,

  }

} 



我们这样配置好后，就可以将接口代理到本地了。


更多关于接口的配置请参见：https://github.com/chimurai/http-proxy-middleware#options


更多关于webpack 接口配置请参见：https://webpack.js.org/configuration/dev-server/#devserver-proxy
重新配置 src/api/index.js 文件


在上面我们的代理已经配置好了，但是我们的/src/api/index.js还需要调用人家的地址，所以我们来重新配置/src/api/index.js文件，如下


// 配置API接口地址

var root = '/api/v1' 



跨域问题一般仅存在于开发环境上，到实际生产环境上一般不存在跨域问题了，所以采用这种方式来进行配置，能很好的解决跨域问题。值得注意的是，配置完代理后是不会立即生效的，需要重启服务器。
我们按Ctrl+c先停掉服务，然后再用cnpm run dev重启服务即可。


cnpm run dev 


重启完成后，打开浏览器，在F12开发者工具里，可以看到如下：

可以看到我们请求的接口地址已经变成了localhost也就是本机，说明我们的接口已经成功的代理到本地了。再切换到Priview选项卡来看一下数据是否正常返回：

如果出现上图，则说明数据也正常的返回了，这样我们已经顺利的将接口代理到了本地，并且读取到了数据。开始准备下面的工作吧！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。