详解Vue-cli代理解决跨域问题
使用vue-cli调接口的时候，总是会出现垮与问题，因为vue的localhost与访问域名不一致导致。而这一点，开发者显然也想到了，故而在vuejs-templates，也就是html" target="_blank">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）中解决了跨域问题，生产环境中真正部署到服务器上如果是非同源还是存在跨域问题
部署到服务器上跨域解决问题，以后项目布置会继续更新。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍Vue-cli proxyTable 解决开发环境的跨域问题详解，包括了Vue-cli proxyTable 解决开发环境的跨域问题详解的使用技巧和注意事项，需要的朋友参考一下 和后端联调时总是会面对恼人的跨域问题，最近基于Vue开发项目时也遇到了这个问题，两边各自想了一堆办法，查了一堆资料，加了一堆参数，最后还得我把自己的localhost映射成上线时将要使用的域名。 今天翻看代码
-
本文向大家介绍详解vue-cli开发环境跨域问题解决方案，包括了详解vue-cli开发环境跨域问题解决方案的使用技巧和注意事项，需要的朋友参考一下 前后端分离开发中必要会遇到的问题—跨域。在使用vue开发的时候，开始为了解决跨域问题。采用的是CORS（Cross-origin resource sharing）。后台在响应头中添加Access-Control-Allow-Origin。这样就可以跨
-
本文向大家介绍vue-cli怎么解决跨域的问题？相关面试题，主要包含被问及vue-cli怎么解决跨域的问题？时的应答技巧和注意事项，需要的朋友参考一下 vue-cli 主要在本地通过本地服务器拦截转发请求的模式解决跨域问题。 步骤： config中设置proxy，这步决定哪种命名规则（比如'/abc/'开头的请求）的请求将被拦截（个人以为是通过改造XMLHttpRequest对象）到本地跨域服务器
-
本文向大家介绍详解vue或uni-app的跨域问题解决方案，包括了详解vue或uni-app的跨域问题解决方案的使用技巧和注意事项，需要的朋友参考一下 常见解决方案有两种 服务器端解决方案 服务器告诉浏览器：你允许我跨域 具体如何告诉浏览器，请看： 将以上代码写入中间件： 在路由上添加跨域中间件，告诉客户端：服务器允许跨域请求 客户器端解决方案 欺骗浏览器，让浏览器觉得你没有跨域（其实还是跨域了，
-
本文向大家介绍详解webpack-dev-server 设置反向代理解决跨域问题，包括了详解webpack-dev-server 设置反向代理解决跨域问题的使用技巧和注意事项，需要的朋友参考一下 一、设置代理的原因 现在对前端开发的要求越来越高，并且随着自动化以及模块化的诞生，前后端开发模式越来越流行。后端只负责接口，前端负责数据展示、逻辑处理。但是前后端开发模式，有一个重要的问题，就是跨域问题。
-
本文向大家介绍vue-cli webpack 开发环境跨域详解，包括了vue-cli webpack 开发环境跨域详解的使用技巧和注意事项，需要的朋友参考一下 edit dev.proxyTable option in config/index.js. The dev server is using http-proxy-middleware for proxying 为了解决跨域问题， 通常会使