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框架
Aug 13 Javascript
js中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
React key值的作用和使用详解
Aug 23 Javascript
inquirer.js一个用户与命令行交互的工具详解
May 18 Javascript
npm qs模块使用详解
Feb 07 Javascript
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
关于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
PHP将XML转数组过程详解
2013/11/13 PHP
PHP Reflection API详解
2015/05/12 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
限制文本框输入N个字符的js代码
2010/05/13 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
详解vue组件基础
2018/05/04 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
js常见遍历操作小结
2019/06/06 Javascript
python冒泡排序算法的实现代码
2013/11/21 Python
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
django中的setting最佳配置小结
2017/11/21 Python
详解python字节码
2018/02/07 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
Python shutil模块用法实例分析
2019/10/02 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
2015最新婚礼司仪主持词
2015/06/30 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
python编写五子棋游戏
2021/05/25 Python
如何利用pygame实现打飞机小游戏
2021/05/30 Python