本篇文章主要介绍了Vue-cli代理解决跨域问题,详细的介绍了Vue如何设置代理,具有一定参考价值,有兴趣的可以了解一下

使用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)中解决了跨域问题,生产环境中真正部署到服务器上如果是非同源还是存在跨域问题

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

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

最新资讯
分析师:明年乃至未来几年 iPhone处理器仅台积电代工

分析师:明年乃至未来

据行业分析师称,至少在未来两年内,台积电仍将是苹果公司
苹果与第三方经销商达成iPhone屏幕维修协议

苹果与第三方经销商达

苹果公司(以下简称“苹果”)日前与第三方经销商和服务
消费降级不可避免,国产手机怎样留住用户?

消费降级不可避免,国产

经济萧条下手机销量急剧下滑的情况。毕竟手机使用周期
那些年我们追过的“苹果皮”怎么样了?

那些年我们追过的“苹

充电宝、分离式设计、三卡三待功能了解一下。
苹果或为每部5G iPhone交21美元专利费:高通占大头

苹果或为每部5G iPhon

从理论上讲,苹果未来为每一部iPhone支付的5G相关专利费
AI被人类选手“虐杀”!DOTA2顶级职业赛人类战胜AI

AI被人类选手“虐杀”

不同于上次OpenAI大败Dendi,这一次OpenAIFive首场以败
最新文章
Angular2进阶之如何避免Dom误区

Angular2进阶之如何避

这篇文章主要介绍了Angular2进阶之如何避免Dom误区,小
使用FileReader API创建Vue文件阅读器组件

使用FileReader API创

这篇文章主要介绍了使用FileReader API创建一个Vue的
react 实现页面代码分割、按需加载的方法

react 实现页面代码分

本篇文章主要介绍了react 实现页面代码分割、按需加载
Vue项目分环境打包的实现步骤

Vue项目分环境打包的

这篇文章主要介绍了Vue项目如何分环境打包,实现方法大
vue 组件中slot插口的具体用法

vue 组件中slot插口的

这篇文章主要介绍了vue 中slot 的具体用法,包括子组件
JS遍历DOM文档树的方法实例详解

JS遍历DOM文档树的方

这篇文章主要介绍了JS遍历DOM文档树的方法,结合实例形