如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题
在开发环境与后端调试的时候难免会遇到跨域问题,很多人说跨域交给后端解决就好了。
其实不然,前端也有很多方法可以解决跨域,方便也快捷。
常见的有nginx转发、node代理。
在vue项目中常用的是proxyTable,这个用起来很方便。
打开config下面的index.js,找到proxyTable,添加以下代码即可:
'/api': { //替换代理地址名称
target: 'http://api.douban.com/', //代理地址
changeOrigin: true, //可否跨域
pathRewrite: {
'^/api': '' //重写接口,去掉/api
}
}
配置完之后需要重启下项目 npm run dev
重启之后,就可以调用,实现跨域了
具体使用:
在需要调用的接口前加上“/api”即可
不出意料,点击按钮之后控制台会打印出返回结果
为了方便打包后去除'/api',建议把'/api'设成全局,在main.js中添加
到此结束,希望有所帮助。
有问题联系QQ412606846 微信同号
如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题的更多相关文章
- Vue-cli proxyTable 解决开发环境的跨域问题
Vue-cli proxyTable 解决开发环境的跨域问题 proxyTable: { '/list': { target: 'http://api.xxxxxxxx.com', pathRewri ...
- 转:Vue-cli proxyTable 解决开发环境的跨域问题
转:http://www.jianshu.com/p/95b2caf7e0da 和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆办法,查了一堆资料,加了 ...
- Vue proxyTable 解决开发环境的跨域问题
在 config/index.js 配置文件中,添加 dev: { proxyTable: { '/ssp/withdraw': { target: 'http://dev.home.phiwifi. ...
- Vue-cli中的proxyTable解决开发环境的跨域问题
https://blog.csdn.net/u012149969/article/details/80288126 https://vuejs-templates.github.io/webpack/ ...
- vue proxyTable代理 解决开发环境的跨域问题
如果我们项目请求的地址为 htttp://xxxx.com/a/b/c 可以设置代理为: dev:{ assetsSubDirectory: 'static',// 静态资源文件夹 assetsPub ...
- Vue---vue-cli 中的proxyTable解决开发环境中的跨域问题
使用vue+vue-cli+axios+element-ui开发后台管理系统时,遇到一个问题,后台给了一个接口,我这边用axios请求数据,控制台总是报405错误和跨域错误 错误 405? 没见过!! ...
- Vue的学习总结之---Vue项目 前后端分离模式解决开发环境的跨域问题
原文:https://blog.csdn.net/localhost_1314/article/details/83623526 在前后端分离的web开发中,我们与后台联调时,会遇到跨域的问题. 比如 ...
- vue开发环境配置跨域,一步到位
本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问,前端跨域解决方案 production:产品 生产环境 development:开发 开发环境 1 ...
- nodejs 代理 解决开发环境跨域问题
前后端分离项目中,会遇到跨域问题.解决方法无非就是jsonp cors等. 本次项目前端不搭node服务,线上用nginx搭站点,nginx转发ajax请求server. 本地开发环境的跨域问题用no ...
随机推荐
- 如何使用 VS2015 进行远程调试?
VisualStudio\Microsoft Visual Studio 14.0\Common7\IDE\Remote Debugger 直接复制 Remote Debugger 文件,里面包含了 ...
- NJU 1010 Air
思路:把那张图打表(吐血...),然后就按照规则输出就行. AC代码 #include <cstdio> #include <cmath> #include <cctyp ...
- HDU - 2181 dfs [kuangbin带你飞]专题二
保存每个节点的下一个节点一直往下面走就行了,不能重复经过某个点,当经过的点达到20个而且当前节点的下一个节点是起点就打印答案. AC代码 #include<cstdio> #include ...
- java网络编程(1)
太久没有用java做一些东西了,搞太多的协议框架,基本的东西好像快忘记了~每天抽出一点时间出来,来好好温习下基础,顺便记录下来,以后还忘记可以回来看看==.首先从网络编程开始吧==.这玩意太久没有用了 ...
- Supervisor使用说明
Supervisor是一个 Python 开发的 client/server 系统,可以管理和监控类 UNIX 操作系统上面的进程.它可以同时启动,关闭多个进程,使用起来特别的方便. 1.组成部分 s ...
- for、for in和while以及do while
for循环:一般用在已知判断条件的循环; for(变量初始化;循环条件判断;循环后的执行){ 代码块 } //变量初始化可以省略,但是分号不能省.有多个的话用逗号隔开 //循环条件判断是true还是f ...
- eclipse中maven的run as打war包失败的问题
场景一: 由于某些原因,有的时候需要暂时在断网的情况下,或者更标准的说,是在连不上公司的maven公有仓库的情况下打包. 很长一段时间,我打包都是在eclipse中用run as在线打包,直到前不久一 ...
- FusionCharts 2D帕累托图
1.了解帕累托图的特性以及和其他图的共性 2.设计帕累托图页面中引入图的类型以及怎么引入到页面 Pareto2D.html: <!DOCTYPE HTML PUBLIC "-//W3C ...
- (二十四)mongodb中group的问题二
今天的工作还是继续昨天没有完成的,由于对mongodb数据库的不熟悉,导致昨天的思路上也出了一点问题,我需要查询出同一个ruleID中不同的processingID的条数,然后根据条数来排列先后顺序, ...
- RobotFramework下的http接口自动化Get Response Status 关键字的使用
Get Response Status 关键字用来获取http请求返回的http状态码. 示例1:访问苏宁易购网站上的http推荐接口,使用Get Response Status 关键字来获取返回的h ...