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动画animate方法使用介绍
May 06 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
jQuery UI实现动画效果代码分享
Aug 19 jQuery
Vue程序调试的方法
Jun 17 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 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
PHPShop存在多个安全漏洞
2006/10/09 PHP
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
PHP生成树的方法
2015/07/28 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
用Python解数独的方法示例
2019/10/24 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
Python控制台实现交互式环境执行
2020/06/09 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
日语求职信范文
2013/12/17 职场文书
普通大学毕业生自荐信范文
2014/02/23 职场文书
招聘专员岗位职责
2014/03/07 职场文书
岗位明星事迹材料
2014/05/18 职场文书
入党自传范文2015
2015/06/26 职场文书
Hive HQL支持2种查询语句风格
2022/06/25 数据库