工作中vue项目前后端分离,调用后端本地接口出现跨域问题的完美解决
在我们实际开发中,选择不错的前端框架可以为我们省掉很多时间,当然,有时我们也会遇到很多坑。
最近在做vue项目时就遇到了跨域问题,一般来说,出现跨域我们第一反应使用jsonp,但是这个只支持get请求。在这就是让后端加上响应头,允许我们跨域请求。
但是在做vue项目时,虽然后端给我加了请求头,依然出现了跨域,于是乎我就开始找各路大神的博客,终于给解决了。
如果谁用vue-cli脚手架搭建的项目,出现跨域后,我的解决办法是利用反向代理将我们的请求源给代理一下,
具体代码
在config文件夹中的index.js里将
'/api': { //使用"/api"来代替"http://f.apiplus.c"
//target: 'http://192.168.0.102:8080', //源地址
target: 'http://47.99.54.35:8081', //源地址
changeOrigin: true, //改变源
pathRewrite: {
'^/api': '' //路径重写
}
}
放到
proxyTable: {}
里面

然后,我们在组件中请求数据时

就这样,请求成功了。
工作中vue项目前后端分离,调用后端本地接口出现跨域问题的完美解决的更多相关文章
- 开发环境Vue访问后端接口教程(前后端分离开发,端口不同下跨域访问)
原理:开发环境下的跨域:在node.js上实现请求转发,vue前端通过axios请求到node.js上,node.js将请求转发到后端,反之.响应也是,先到node.js上,然后转发vue-cil项目 ...
- 前后端分离跨域 关于前后端分离开发环境下的跨域访问问题(angular proxy=>nginx )
前后端分离后遇到了跨域访问的问题: angular1中使用proxy很麻烦,最后还是失败结束:最后总结3种方法如下: 本人使用的第一种方法,只是开发环境下使用很方便! 1:禁掉谷歌的安全策略(Turn ...
- springMVC前后端分离开发模式下支持跨域请求
1.web.xml中添加cors规则支持(请修改包名) <filter> <filter-name>cors</filter-name> <filter-cl ...
- 从壹开始前后端分离 [.netCore 填坑 ] 三十三║ ⅖ 种方法实现完美跨域
缘起 哈喽大家周四好,趁着大家在团建的时候花一个下午学点儿东西,也是督促大家学习哟,希望大家看到老张的文章,可以有一丢丢的学习动力.不过话说过来,该吃的团建还是要去的,不能学我呀 [ /(ㄒoㄒ)/~ ...
- 在Angular.js中的H5页面调用Web api时跨域问题处理
/// <summary> /// 被请求时 /// 在Angular.js中的H5页面调用Web api时跨域问题处理 /// </summary> /// <para ...
- 跨域调用webapi web端跨域调用webapi
web端跨域调用webapi 在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webap ...
- ASP.NET中Cookie跨域的问题及解决代码
ASP.NET中Cookie跨域的问题及解决代码 http://www.liyumei.net.cn/post/share18.html Cookies揭秘 http://www.cnblogs.c ...
- vue+django分离开发的思想和跨域问题的解决
一.介绍 在前后端分离的开发过程中,会涉及到跨域的问题,比如本次个人使用的Django+vue的框架,在vue对Django进行响应,Django再将响应的数据返回给vue,vue在进行渲染,如果不设 ...
- 解决Vue调用springboot接口403跨域问题
最近在做一个前后端分离的项目, 前端用的是Vue后端使用的是springboot, 在项目整合的时候发现前端调用后端接口报错403跨域请求问题 前端跨域请求已解决, 那么问题就出在后端了, 找了一些资 ...
随机推荐
- jQuery中对象的构建
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery.noop
一个空函数 当你仅仅想要传递一个空函数的时候,就用他吧.这对一些插件作者很有用,当插件提供了一个可选的回调函数接口,那么如果调用的时候没有传递这个回调函数,就用jQuery.noop来代替执行.
- Android设备与外接U盘实现数据读取操作
现在越来越多手机支持OTG功能,通过OTG可以实现与外接入的U盘等USB设备实现数据传输.关于OTG,可以参考: http://blog.csdn.net/srw11/article/details/ ...
- 关于java中继承抽象类和实现接口的区别
简单来说,继承就是“是不是”,实现就是“有没有”.(一个大神说的,我觉得很生动很形象 海子大神链接http://www.cnblogs.com/dolphin0520/p/3811437.html)
- 使用XCA(X Certificate and key management)可视化项目经理SSL 凭证(4)--凭借自身的凭证管理中心的定义(Certificate Authority)签名证书申请
随着XCA(X Certificate and key management)可视化项目经理SSL 证书系列文章(2)和(3)中.我们学习了怎样用XCA(X Certificate and key m ...
- uwp - 禁用屏幕翻转/禁用屏幕旋转/禁用横屏模式
原文:uwp - 禁用屏幕翻转/禁用屏幕旋转/禁用横屏模式 解决方案目录 > Package.appxmanifest 双击打开,把支持的旋转:纵向勾上,只勾这一个其他不勾,就可以了.同理,想让 ...
- python3实现万年历(包括公历、农历、节气、节日)
#!/usr/local/bin/python3 # coding=utf-8 # Created: 20/07/2012 # Copyright: http://www.cnblogs.com/tx ...
- C#中将字符串转换成Md5值的方法
原文:C#中将字符串转换成Md5值的方法 版权声明:有问题可联系博主QQ:15577969,大家一起相互交流和学习. https://blog.csdn.net/qq15577969/article/ ...
- Python+Django+SAE系列教程10-----Django模板
在本章中,我们开始模板,在前面的章节,您可能已经注意到,我们回到文本的方式有点特别的示例视图. 那.HTML直接在硬编码 Python 其中代码. 这的确是一个小BT. def current_dat ...
- Math.Round四舍五入说明
Math.Round默认采用的不是四舍五入法, 而是四舍六入的银行家算法, 如何找回四舍五入法? Math.Round默认采用的不是四舍五入法, 而是四舍六入的银行家算法, 也就是四舍六入五考虑,五 ...