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 相关文章推荐
JS 非图片动态loading效果实现代码
Apr 09 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
Dec 30 Javascript
用Jquery重写windows.alert方法实现思路
Apr 03 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
javascript中递归的两种写法
Jan 17 Javascript
解析Angular 2+ 样式绑定方式
Jan 15 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
vue生成文件本地打开查看效果的实例
Sep 06 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 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
PHP5+UTF8多文件上传类
2008/10/17 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
js控制div及网页相关属性的代码
2009/12/19 Javascript
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
深入理解javascript作用域和闭包
2014/09/23 Javascript
jQuery实现div横向拖拽排序的简单实例
2016/07/13 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
全面理解Python中self的用法
2016/06/04 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
常见的软件开发流程有哪些
2015/11/14 面试题
饮料业务员岗位职责
2013/12/15 职场文书
工程造价专业大学生职业规划范文
2014/03/09 职场文书
民事授权委托书范文
2014/08/02 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
年检委托书
2014/08/30 职场文书
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL
SQL中的连接查询详解
2022/06/21 SQL Server