使用vue-cli调接口的时候，总是会出现垮与问题，因为vue的localhost与访问域名不一致导致。而这一点，开发者显然也想到了，故而在vuejs-templates，也就是vue-cli的使用的模板插件里，有关于API proxy的说明，这个配置就是将localhost映射成访问的域名。

那么何为代理？

代理服务器英文全称是Proxy Server，其功能就是代理网络用户去取得网络信息。形象的说：它是网络信息的中转站。可以简单粗暴理解为把你的域名转换成你访问的域名，（我这么记的，当然可能并不恰当）形成同源，就能访问。

那么在vue里，如何设置代理？

1.config目录找到index.js

2.在dev里添加proxyTable

 dev: {
  env: require('./dev.env'),
  port: 8080,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
    '/api':{
      target:"http://47.93.166.112/BrainPcWeb",//设置你调用的接口域名和端口号 别忘了加http
      changeOrigin:true,
      pathRewrite:{
        '^/api':''//这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替 
             //比如我要调用'http://40.00.100.133:3002/user/login'，直接写‘/api/user/login'即可
      }
    }
  }

这一步为止，你重新run一下vue已经不存在跨域问题了。

如果你想在main.js把api定义*局变量也可以这样，虽然多此一举。代码如下：

Vue.prototype.HOST = '/api'
//这时，你的/api/user/login就可以换成this.HOST/user/login

但是注意了

这只是开发环境（dev）中解决了跨域问题，生产环境中真正部署到服务器上如果是非同源还是存在跨域问题

部署到服务器上跨域解决问题，以后项目布置会继续更新。

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

# vuecli跨域问题  # vuecli跨域  # vue  # cli  # 跨域  # 详解vue-cli本地环境API代理设置和解决跨域  # Vue项目配置跨域访问和代理proxy设置方式  # vue使用代理解决请求跨域问题详解  # vue 设置proxyTable参数进行代理跨域  # vue打包使用Nginx代理解决跨域问题  # vue代理和跨域问题的解决  # vue.js使用代理和使用Nginx来解决跨域的问题  # 详解vue-cli项目开发/生产环境代理实现跨域请求  # vue代理模式解决跨域详解  # 器上  # 我要  # 就能  # 的说  # 而在  # 你想  # 它是  # 英文  # 这只  # 解决问题  # 而这  # 也想  # 别忘了  # 转换成  # 代理服务器  # 何为  # 大家多多  # 就可以  # 如何设置  # 端口号 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 千问怎样用提示词获取健康建议_千问健康类提示词注意事项【指南】  node.js报错：Cannot find module 'ejs'的解决办法  java中使用zxing批量生成二维码立牌  如何在阿里云虚拟服务器快速搭建网站？  QQ浏览器网页版登录入口 个人中心在线进入  JavaScript如何实现音频处理_Web Audio API如何工作？  Laravel如何创建和注册中间件_Laravel中间件编写与应用流程  如何用西部建站助手快速创建专业网站？  如何在IIS中新建站点并配置端口与物理路径？  Laravel如何使用Laravel Vite编译前端_Laravel10以上版本前端静态资源管理【教程】  打开php文件提示内存不足_怎么调整php内存限制【解决方案】  INTERNET浏览器怎样恢复关闭标签页_INTERNET浏览器标签恢复快捷键与方法【指南】  Laravel如何实现全文搜索功能？（Scout和Algolia示例）  谷歌Google入口永久地址_Google搜索引擎官网首页永久入口  Laravel Facade的原理是什么_深入理解Laravel门面及其工作机制  php json中文编码为null的解决办法  iOS中将个别页面强制横屏其他页面竖屏  免费网站制作appp,免费制作app哪个平台好？  Laravel storage目录权限问题_Laravel文件写入权限设置  如何在建站之星绑定自定义域名？  微信小程序 五星评分(包括半颗星评分)实例代码  Windows10电脑怎么设置虚拟光驱_Win10右键装载ISO镜像文件  Laravel如何使用Gate和Policy进行授权？（权限控制）  Android自定义控件实现温度旋转按钮效果  香港服务器建站指南：免备案优势与SEO优化技巧全解析  Laravel的路由模型绑定怎么用_Laravel Route Model Binding简化控制器逻辑  Linux系统运维自动化项目教程_Ansible批量管理实战  如何快速选择适合个人网站的云服务器配置？  如何快速上传建站程序避免常见错误？  香港服务器网站生成指南：免费资源整合与高速稳定配置方案  百度浏览器网页无法复制文字怎么办 百度浏览器复制修复  php打包exe后无法访问网络共享_共享权限设置方法【教程】  高端云建站费用究竟需要多少预算？  JavaScript如何实现类型判断_typeof和instanceof有什么区别  高防服务器租用指南：配置选择与快速部署攻略  iOS发送验证码倒计时应用  手机软键盘弹出时影响布局的解决方法  Laravel项目怎么部署到Linux_Laravel Nginx配置详解  android nfc常用标签读取总结  如何用JavaScript实现文本编辑器_光标和选区怎么处理  rsync同步时出现rsync: failed to set times on “xxxx”: Operation not permitted  公司门户网站制作流程,华为官网怎么做？  油猴 教程,油猴搜脚本为什么会网页无法显示？  php后缀怎么变mp4格式错误_修改扩展名提示格式不对怎么办【技巧】  Laravel如何使用Service Container和依赖注入？（代码示例）  Laravel如何实现本地化和多语言支持？（i18n教程）  Laravel如何实现用户角色和权限系统_Laravel角色权限管理机制  javascript中的数组方法有哪些_如何利用数组方法简化数据处理  HTML 中如何正确使用模板变量为元素的 name 属性赋值  怎样使用JSON进行数据交换_它有什么限制