美文网首页
跨域请求?两种解决方案CORS与JSONP

跨域请求?两种解决方案CORS与JSONP

作者: 英俊又可爱XD | 来源:发表于2018-01-05 21:33 被阅读0次

什么是同源?什么是跨域?

跨域是指从一个域名的网页去请求另一个域名的资源,即请求不同源的资源。

同源的三个条件:

网络协议、端口、域名(子域名)全部相同,三者缺一不可。
有任何一个不同,则涉及到跨域,详见表格:

URL 说明 是否允许通信
http://www.a.com/a.js
http://www.a.com/b.js
同一域名下 允许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js
同一域名下不同文件夹 允许
http://www.a.com:8000/a.js
http://www.a.com/b.js
同一域名,不同端口 不允许
http://www.a.com/a.js
https://www.a.com/b.js
同一域名,不同协议 不允许
http://www.a.com/a.js
http://70.32.92.74/b.js
域名和域名对应ip 不允许
http://www.a.com/a.js
http://script.a.com/b.js
主域相同,子域不同 不允许
http://www.a.com/a.js
http://a.com/b.js
同一域名,不同二级域名 不允许

目前比较主流的解决方案有两种,CORS与JSONP。

CORS(corss origin resource share) 兼容度低

跟前端没有任何关系在服务器端设置“允许跨域访问”即可。

注意:

HTML5语法,前提条件是浏览器需要支持这个header(IE10及以下的浏览器不支持)

支持所有的跨域访问,但存在安全风险
<?php
header('Access-Control-Allow-Origin: *');
?>
只支持该域名访问(定向)
header('Access-Control-Allow-Origin: http://a.com');

JSONP 兼容度高

原理:

dom元素的src属性可以跨域获取资源,而且这种方案不受浏览器的限制。
传递的数据为JSON格式,p可以理解为package,将数据打包进JSON。
不需要后台特殊处理。

注意:
  1. 有src属性的标签有:<img>、<script>
  2. JSONP只能用于发起GET请求,无法发起JSONP的POST请求
JSONP的原生JS语法

将“访问链接?callback=函数名”写入内容为空的script标签的src中。

<script>    //函数即对所请求回来的数据进行的处理方法
  function doSomething(backData){
          console.log(backData);
  }
</script>
<script src="http://192.168.19.68/2018-1-5/05.JSONP/api/backData.php?callback=doSomething"></script>
jQuery请求JSONP
<script src="./js/jquery-1.12.4.min.js"></script>
<script>
    $(function(){
        $('h2').click(function(){
            $.get({
            //请求地址
                url:"http://192.168.19.68/2018-1-5/05.JSONP/api/backData.php",
                success:function(backData){
                    console.log(backData);   //函数即对所请求回来的数据进行的处理方法
                },
                dataType:'jsonp'  // 人为的告诉jQ这是JSONP的接口
            })
        })
    })
</script>
jQuery封装好的JSONP方法
$.getJSON( "http://b.a.com/bar?callback=callback", function( data ){
    // 处理跨域请求得到的数据
});

相关文章

  • Spring Boot使用CORS解决跨域问题

    一、跨域问题描述 Web开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS等等。CORS 与 ...

  • spring boot CORS 支持

    一、Web 开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS 等等 CORS 与 JSONP...

  • ajax跨域请求

    ajax跨域请求(jsonp) 利用JSONP解决AJAX跨域问题的原理与jQuery解决方案JSONP jQue...

  • JavaScript - GET/POST及跨域方法

    xhr 原生方法请求 window fetch 方法 关于跨域 利用JSONP实现跨域调用 使用 CORS(跨域资...

  • 跨域请求解决办法

    CORS:即跨域资源共享,它允许浏览器向跨域服务器发送ajax请求 与JSONP的区别:jsonp是绕过了同源限制...

  • Ajax下

    一、cors跨域请求 二、jsonp百度搜索的例子 jsonp.html jsonp.js

  • 进阶篇:同源策略 & 跨域(17)

    饥人谷学习进阶第 17 天 关于跨域拓展: 服务器端中转跨域JSONP、CORS 这两种跨域请求方式都需要对方服务...

  • AJAX入门

    处理跨域的主要方法 JSONP CORS本文主要讨论CORS解决AJAX因为浏览器同源策略不能跨域请求数据的问题。...

  • AJAX和JSONP请求

    同源策略:端口 域名 协议相同 跨域解决CORS代理请求方式jsonp JSONP流程:动态创建script标签,...

  • 跨域方法集锦

    什么叫跨域跨域解决方法:1.cors(简单请求、非简单请求)2.jsonp3.new Image()4.nginx...

网友评论

      本文标题:跨域请求?两种解决方案CORS与JSONP

      本文链接:https://www.haomeiwen.com/subject/jkzsnxtx.html