vue解决跨域问题(推荐)


Posted in Javascript onNovember 10, 2020

一.什么是跨域

跨域问题的出现是因为浏览器的同源策略问题,所谓同源:就是两个页面具有相同的协议(protocol),主机(host)和端口号(port),它是浏览器最核心也是最基本的功能,如果没有同源策略我们的浏览器将会十分的不安全,随时都可能受到攻击。

当我们请求一个接口的时候,出现如:Access-Control-Allow-Origin 字眼的时候说明请求跨域了

vue解决跨域问题(推荐)

二.如何解决跨域问题

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', // 请求方式为jsonp
 jsonpCallback: "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,这个重写很重要!!!

vue解决跨域问题(推荐)

2.在创建axios实例的时候将baseURL设置为/api ,这时候我们的跨域就已经完成了。

vue解决跨域问题(推荐)

3. 假如请求的真正地址为:http://121.121.67.254:8185/core/getdata/userInfo,但我们在浏览器上会看到是这样的: http://localhost:8080/api/core/getData/userInfo ,多了个/api,但并不影响我们请求数据。

vue解决跨域问题(推荐)

到此这篇关于vue解决跨域问题(推荐)的文章就介绍到这了,更多相关vue解决跨域内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
javascript内置对象arguments详解
Mar 16 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 Javascript
Validform表单验证总结篇
Oct 31 Javascript
JavaScript数据结构之二叉树的查找算法示例
Apr 13 Javascript
详解Node全局变量global模块
Sep 28 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
Vue数据双向绑定底层实现原理
Nov 22 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
JS class语法糖的深入剖析
Jul 07 Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 #Javascript
如何在vue 中引入使用jquery
Nov 10 #jQuery
Vue + ts实现轮播插件的示例
Nov 10 #Javascript
vue router返回到指定的路由的场景分析
Nov 10 #Javascript
如何将Node.js中的回调转换为Promise
Nov 10 #Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 09 #Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 #jQuery
You might like
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
php use和include区别总结
2019/10/13 PHP
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
angularJS实现不同视图同步刷新详解
2018/10/09 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
Vue的Options用法说明
2020/08/14 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
简单谈谈Python的pycurl模块
2018/04/07 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
Python实现打印实心和空心菱形
2019/11/23 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
全球速卖通西班牙站:AliExpress西班牙
2017/10/30 全球购物
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
不打扫卫生检讨书
2014/02/12 职场文书
幼儿教师培训感言
2014/03/08 职场文书
业务员自荐信范文
2014/04/20 职场文书
新农村建设典型材料
2014/05/31 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
企业法人任命书
2015/09/21 职场文书
员工安全责任协议书
2016/03/22 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫