vue-cli跨域调试接口的vue本地实现

大部分使用vue的同学都是基于vue-cli构建项目的，vue-cli中的配置全面且功能强大。

//Common命令npm run dev //Local热更新模式npm run build //Production模式会在根目录下打包一个dist文件夹，可以直接放在服务器上使用开发阶段与后台学员进行交互(调试界面)。这台机器和服务器之间会出现跨域问题。

跨域错误报告

解决办法

执行npm run dev后，项目将在本地节点中执行。Vue-cli提供了非常方便的代理模式。

直接转到代码根目录/config/index.js，搜索proxyTable，并将其更改为以下对象

proxyTable: {'/api': {//使用'/api '而不是' http://Baidu.com ' target : ' http://Baidu.com '，//源地址为Change origin in 3360 true，//更改源路径重写3360 { '/api ' : '///路径重写}}}此代码意味着用/API带替换请求地址的域名

为了使用方便，不同环境下需要不同的配置

这是本地开发环境的配置

模块。导出=合并(prodenv，{//您的一些其他配置。//。//本地调试环境中的请求地址/api //api配置API_ROOT: ''/api ' '，})根目录/config/prod.env.js这是生产构建环境的配置。

Module.exports={//您的一些其他配置。//。API_ROOT: ''实际生产环境的请求地址' '，}需要修改类似的执行配置

重新启动npm运行开发重新启动npm运行开发重新启动npm运行开发

配置完成后，我们找到src/main.js

以axios为例

从‘vue’导入vue从‘axios’/process . env . API _ root导入Vue获取API _ root const baseUrl=process . env . API _ root//并将baseURl挂载到Vue原型上，方便了Vue.prototype.baseUrl=baseUrl的内部使用；//axios也安装在原型上。这个。$http指向axios vue . prototype . $ http=axios；好的，一切都准备好了，我们可以在任何地方使用它。

//组件中使用了axios//。/this . base URL的值在不同的配置下是不同的。这个。$ http.post (` $ {this。baseurl}/AAA/XXX `，{ID : 123})。然后(RES={//请求成功。})所有配置都已完成

应该指出的是

在本地环境中查看浏览器的网络

在本地环境中，请求的ip地址成为本地ip，后面跟一个/api，表示代理成功。

E.例如浏览器上请求地址(这是代理地址)

192.168.0.0:8080/api/xxx

但事实上，真正需要的地址是

根目录/config/index.js配置的地址/xxx

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