使用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已经不存在跨域问题了。

但是注意了

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

转载于:https://www.cnblogs.com/wws-bk/p/9554669.html

Vue-cli代理解决跨域问题相关推荐

vue反向代理解决跨域及部署nginx端口转发解决跨域
1. 前言本文是为了解决vue反向代理解决跨域及部署服务器nginx端口转发解决跨域,因为踩了不少的坑,百度了很多,也试了太多的方法,最终得以解决,所以记录一下,希望遇到同样问题的友友们可以高效的解 ...
No ‘Access-Control-Allow-Origin‘ header is present on the requested resource Vue配置代理解决跨域问题
前言在进行web开发进行数据请求的时候常常会遇到跨域问题导致无法请求数据. 如果采用如下方法向http://localhost:4000服务器发送getStudents进行接口数据请求,在后端没有处 ...
Vue + Nodejs + Express 解决跨域的问题
Vue + Nodejs + Express 解决跨域的问题首先检测你的Vue的版本号此文章针对3.0版本解决跨域问题 $ vue -V 2.X or 3.X 直接访问如下 created() { ...
通过nginx反向代理解决跨域
先写一个发送跨域请求的页面index.html <html> <head><title></title> </head> <body& ...
vue2项目复习01-关闭elint检校，src文件别名，路由传参的对象写法，代理解决跨域问题，nprogress，vuex状态管理库，store的模块式开发，节流与防抖，编程式导航+事件委托路由跳转
1.关闭elint语法校验创建vue.config.js //关闭elint语法校验 {lintOnSave:false; } 2.src文件夹配置别名 jsconfig.json配置别名 @代表s ...
VUE部署nginx解决跨域问题
VUE部署nginx解决跨域问题 Vue的代理跨域问题,需要确定的是在开发阶段可以使用,部署到服务器后出现请求失败的问题(404),如下图. VUE配置的代理 Vue的代理跨域问题,需要确定的是在开发 ...
使用反向代理解决跨域问题
在项目根目录下新建一个webpack的配置文件:vue.config.js. 跨域问题的解决必须在vue.config.js文件中进行配置书写. 代码内容如下 module.exports={devS ...
【react】使用代理解决跨域问题
[react]使用代理解决跨域问题参考文章: (1)[react]使用代理解决跨域问题 (2)https://www.cnblogs.com/guanpingping/p/10344197.html ...
reactjs脚手架配置http-proxy-middleware代理解决跨域问题
reactjs脚手架配置http-proxy-middleware代理解决跨域问题
vue-webpack项目本地开发环境设置代理解决跨域问题
vue-webpack项目本地开发环境设置代理解决跨域问题参考文章: (1)vue-webpack项目本地开发环境设置代理解决跨域问题 (2)https://www.cnblogs.com/xyyt ...

Vue-cli代理解决跨域问题

那么何为代理？

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

但是注意了

Vue-cli代理解决跨域问题相关推荐

最新文章

热门文章