vue 解决跨域问题
一.什么是跨域
跨域问题的出现是因为浏览器的同源策略问题,所谓同源:就是两个页面具有相同的协议(protocol),主机(host)和端口号(port),它是浏览器最核心也是最基本的功能,如果没有同源策略我们的浏览器将会十分的不安全,随时都可能受到攻击。
当我们请求一个接口的时候,出现如:Access-Control-Allow-Origin 字眼的时候说明请求跨域了
二.如何解决跨域问题
1.使用jsonp实现,网页通过script标签向服务器请求json数据,服务器受到请求后,将数据放在一个指定名字的回调函数的参数里面传给前端。
<script src="http://www.test.com/getData?callback=getData"></script> // 向服务器test.com发出请求,该请求的查询字符串有一个callback参数,用来指定回调函数的名字// 处理服务器返回回调函数的数据 <script type="text/javascript">// 服务器返回的数据会放到回调函数里面function getData(res){// 处理获得的数据console.log(res.data)} </script>
2.使用Jquery ajax实现,
$.ajax({url: 'http://www.test.com:8888/getData',type: 'get',dataType: 'jsonp', // 请求方式为jsonpjsonpCallback: "handleCallback", // 自定义回调函数名data: {} })3.在vue开发中实现跨域:在vue项目根目录下找到vue.config.js文件(如果没有该文件则自己创建),在proxy中设置跨域
devServer: {proxy: { //配置跨域'/api': {target: 'http://121.121.67.254:8185/', //这里后台的地址模拟的;应该填写你们真实的后台接口changOrigin: true, //允许跨域pathRewrite: {/* 重写路径,当我们在浏览器中看到请求的地址为:http://localhost:8080/api/core/getData/userInfo 时实际上访问的地址是:http://121.121.67.254:8185/core/getData/userInfo,因为重写了 /api*/'^/api': '' }},}},
在vue中使用proxy进行跨域的原理是:将域名发送给本地的服务器(启动vue项目的服务,loclahost:8080),再由本地的服务器去请求真正的服务器。
以下是我在开发vue项目中实现跨域的步骤:
1.在proxy中设置要访问的地址,并重写/api为空的字符串,因为我们真正请求的地址是没有带/api,这个重写很重要!!!
2.在创建axios实例的时候将baseURL设置为/api ,这时候我们的跨域就已经完成了。
3. 假如请求的真正地址为:http://121.121.67.254:8185/core/getdata/userInfo,但我们在浏览器上会看到是这样的: http://localhost:8080/api/core/getData/userInfo ,多了个/api,但并不影响我们请求数据。
vue 解决跨域问题相关推荐
- vue 解决跨域 调试_vue+Java后端进行调试时解决跨域问题的方式
今天在开发过程中遇到一个问题,拿到了一套vue代码,计划对这套代码的部分样式进行调整,Java后端代码已经写好并且部署到了线上.这时命令行运行vue项目时访问会受限,取不下数据来,遇到了跨域访问失败的 ...
- vue解决跨域问题-反向代理Proxy
浏览器有同源策略,限制同协议.同域名.同端口,只要有一项不一致,就是跨域.(不同源则跨域) 解决方案: 后端 .CORS .JSONP. 反向代理Proxy 同源下:浏览器向服务器请求数据,服务器响应 ...
- vue 解决跨域 调试_Electron-vue解决跨域
Electron-vue解决跨域 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 介绍 在前后端分离开发的时候就会遇到跨域的问题 ...
- vscode vue解决跨域_Vue + WebPack + Typescript初学者VSCode项目 (按需加载、跨域调试、await/async)...
万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...
- vscode vue解决跨域_在vs code 中如何创建一个自己的 Vue 模板代码
首先,在vs code 中打开定义模板代码的地方 第一步,点击"设置"图标按钮,在弹出的菜单中点击的"用户代码片段"(也就是模板) 第二步,在弹出的框中选择新建 ...
- vue解决跨域问题- vue-jsonp
第一步:在vue项目中安装上vue-jsonp npm i vue-jsonp --save 第二步:在vue项目中main.js导入 import { VueJsonp } from 'vue-js ...
- Vue解决跨域多个target问题(配置多个代理问题)
devServer: {publicPath: process.env.NODE_ENV === 'production'? '/production-sub-path/': '/',proxy: { ...
- [Vue.js]跨域访问四种解决方法
2019独角兽企业重金招聘Python工程师标准>>> 报错: has been blocked by CORS policy: Response to preflight requ ...
- vue脚手架解决跨域问题-------配置反向代理
vue脚手架解决跨域问题-------配置反向代理 参考文章: (1)vue脚手架解决跨域问题-------配置反向代理 (2)https://www.cnblogs.com/zbx-boke/p/9 ...
- vue开发环境和生产环境里面解决跨域的几种方法
vue开发环境和生产环境里面解决跨域的几种方法 参考文章: (1)vue开发环境和生产环境里面解决跨域的几种方法 (2)https://www.cnblogs.com/pass245939319/p/ ...
最新文章
- erp服务器型号,erp服务器硬件配置
- BC之SC:区块链之智能合约——与传统合约的比较以及智能合约模型部署原理、运行原理相关配图
- DRF的序列化——Serializers 序列化组件
- 拟态个人主页UI源码开源
- 程序员离职后12天,被前领导命令回去讲清代码?小伙直接说收费
- 从petshop中一实例谈using 的三种用法
- 微信公众号发起微信支付 c#
- linux的shell键盘输入,linux shell获取键盘输入
- jsp 文件使用 include指令 导入 jspf 分析,及导入jspf 文件后出现乱码问题
- 基于qt制作的音乐播放器,2.0版
- 9、【易混淆概念集】-第五章 2 WBS 需求文件 VS 需求跟踪矩阵 确认范围 VS 控制质量 确认范围 VS 控制范围
- win7休眠开启与关闭
- cadence17.4如何修改快捷键(修改env文件,实现空格翻转)
- 「镁客·请讲」泛联智能蒲忠文:灯联网是未来物联网行业的一个杀手级应用...
- mysql+分表+1168,MySQL使用MERGE進行分表實現
- 【Python】批量修改照片日期
- h5 微信公众号获取当前位置
- textView 的设置文本中某一文字的字体颜色以及图文混排
- java电商秒杀深度优化_【B0796】Java性能优化亿级流量秒杀方案及电商项目秒杀实操2020视频教程...
- 魔术师怎么知道你脑中的数字的?