在上一篇博文中，我们已经成功地向cnodejs.org请求了数据，但是您可以注意到我们的/src/api/index.js的第一句话是：

//配置API接口地址varroot=' https://cnodejs.org/API/v1'在这里，我们的接口地址被写死了，这当然是一个问题，但不是最重要的，但它帮助我们很好地处理了cnodejs.org的接口，解决了跨域问题。在实际开发中，许多项目接口不允许我们跨域请求。

第一章前端开发前端，后端也在开发接口。此时，我们的前端工程师不可能直接在服务器上开发，也不可能在本地构建一套服务器环境。如果是这样的话，就违背了我们把前端和后端分开的初衷。

那么如何解决这个问题呢？其实很简单，要知道跨域不是界面的限制，而是浏览器保证数据安全的限制。因此，解决这个问题的一个方法就是打开浏览器，这样我们就可以顺利开发了。但不幸的是，最新的chrome浏览器似乎关闭了这个选项，所以我们只能使用另一种方法，——，在本地代理接口。

将webpack配置为本地代理接口

幸运的是，vue-cli脚手架工具已经充分考虑了这个问题，我们只需简单地设置它就可以实现我们的目标。

我们打开/config/index.js文件，找到以下代码：

//path sassetsubdirectory : ' static '，assets publicatpath : '/'，proxyTable: {}，//各种Dev服务器设置ost: 'localhost '，//可以被process.env.HOSTport: 8080覆盖，//可以被process.env.HOST覆盖，如果端口正在使用，将确定一个空闲端口determinedautoOpenBrowser: false，errorOverlay: true，notifyOnErrors://如果为真，您的代码将在绑定过程中被删除，//林挺错误和警告将显示在控制台中。useEslint:为真，//如果为真，Eslint错误和警告也将显示在浏览器的错误覆盖图//中。showlint errors in overlay : false其中proxyTable: {}，这一行是给我们配置代理的。根据cnodejs.org的界面，我们把这个地方调整为：

proxy table : { '/API/v1/* * ' : { target : ' https://cnodejs . org '，//你的接口的域名secure3360 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运行dev重新启动服务。

重新启动cnpm运行dev后，打开浏览器。在F12开发工具中，您可以看到以下内容：

可以看到，我们请求的接口地址已经更改为localhost，这意味着我们的接口已经成功代理到本地。然后切换到“视图”选项卡，查看数据是否正常返回：

如果出现上面的图片，说明数据已经正常返回，所以我们已经成功将接口代理到本地并读取数据。开始准备接下来的工作吧！

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。