vue+Java后端进行调试时解决跨域问题的方式


Posted in Javascript onOctober 19, 2017

      今天在开发过程中遇到一个问题,拿到了一套vue代码,计划对这套代码的部分样式进行调整,Java后端代码已经写好并且部署到了线上。这时命令行运行vue项目时访问会受限,取不下数据来,遇到了跨域访问失败的问题,这时可以怎么做呢?

首先,要了解什么叫跨域访问?

跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。

所谓同源是指,域名,协议,端口均相同,举个例子:

http://www.123.com/index.html 调用 http://www.123.com/server.php (非跨域)

http://www.123.com/index.html 调用 http://www.456.com/server.php (主域名不同:123/456,跨域)

http://abc.123.com/index.html 调用 http://def.123.com/server.php (子域名不同:abc/def,跨域)

http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php (端口不同:8080/8081,跨域)

http://www.123.com/index.html 调用 https://www.123.com/server.php (协议不同:http/https,跨域)

请注意:localhost和127.0.0.1虽然都指向本机,但也属于跨域。

知道了跨域的概念之后我们如何解决他呢?

我这里的情况是这样的,后端在服务器上,但是vue在本地运行,网上有很多的跨域代理工具,但是都比较麻烦。因为vue-cli 脚手架工具已经帮我们做了处理,只需要稍微配置一下,就可以轻松解决跨域问题。

我们打开 config/index.js 文件,找到以下代码:

vue+Java后端进行调试时解决跨域问题的方式

在proxyTable: {}配置代理,配置信息如下:

proxyTable: { 
 '/project_dzff/': { 
 target: 'http://120.92.45.71/', //域名 
 secure: false, 
 changeOrigin: false, 
 } 
 },

代理配置之后,再去修改项目的调用接口地址的信息,让他调用我们配置好的东西。

serverRoot: env === 'development' ? '/project_dzff' : 
env === 'production' ? '/project_dzff' : 
'https://debug.url.com'

这里由原先访问http://120.92.45.71/调整为访问project_deff,即我们自己定义的名字了。

这时我们运行vue项目,如图:

vue+Java后端进行调试时解决跨域问题的方式

这时基本上访问已经成功代理到本地了,这时就可以使用本地的vue项目访问服务器端的数据了!

总结

Javascript 相关文章推荐
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
bootstrap select插件封装成Vue2.0组件
Apr 17 Javascript
node使用Koa2搭建web项目的方法
Oct 17 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
小程序跳转H5页面的方法步骤
Mar 06 Javascript
AngularJS的$location使用方法详解
Oct 19 #Javascript
vue-cli 自定义指令directive 添加验证滑块示例
Oct 19 #Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 #Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 #jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 #jQuery
浅谈Node Inspector 代理实现
Oct 19 #Javascript
AngularJS表单验证功能
Oct 19 #Javascript
You might like
PHP 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
详谈python read readline readlines的区别
2017/09/22 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
Python实现的建造者模式示例
2018/08/06 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
python实现控制台输出颜色
2021/03/02 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
实习生岗位职责
2014/04/12 职场文书
安全责任协议书
2014/04/21 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL