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 相关文章推荐
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
Sep 09 Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 Javascript
简单聊聊TypeScript只读修饰符
Apr 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重定向的三种方法分享
2012/02/22 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
php简单获取目录列表的方法
2015/03/24 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
jQuery学习笔记之jQuery原型属性和方法
2014/06/09 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
jquery实现限制textarea输入字数的方法
2017/09/06 jQuery
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
JavaScript实现点击切换功能
2021/01/27 Javascript
python实现图片处理和特征提取详解
2017/11/13 Python
Django视图和URL配置详解
2018/01/31 Python
python hash每次调用结果不同的原因
2019/11/21 Python
python 实现任务管理清单案例
2020/04/25 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
Python Selenium操作Cookie的实例方法
2021/02/28 Python
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
2015年工程师工作总结
2015/04/30 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android