Vue解决跨域问题_vue开发项目遇到的难点[通俗易懂]

Vue解决跨域问题_vue开发项目遇到的难点[通俗易懂]vue解决跨域问题_vuetypeerror[err_invalid_url]:invalidurl

Vue解决跨域问题_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',  // 请求方式

今天的文章Vue解决跨域问题_vue开发项目遇到的难点[通俗易懂]分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/70211.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注