首先：什么是跨域？

Cross Domain Request：从一个资源请求另一个资源，二者所在的请求地址不同，域名不同、端口号不同、请求协议不同。

它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。

关于同源策略 这里推荐感兴趣的可以去 阮大的博客查看  阮一峰的个人博客

如何区分当前的请求是跨域请求？

在前端使用XHR对象发起请求时 浏览器 会将请求的发送地址和请求地址 的 协议  域名 端口号 做 字符串的匹配

提示：localhost和127.0.0.1也算跨域！

 浏览器允许跨域请求的情形：

IMG、LINK、SCRIPT、IFRAME ...

 浏览器禁止跨域请求的情形：

XHR  —— 浏览器处于安全考虑，禁用了XHR的跨域请求（其实服务器给出了响应消息，但浏览器不让使用）

如何解决浏览器的XHR跨域请求限制？

网上有关解决跨域请求的方法五花八门，这里仅仅列出常用的两种

1）、修改响应消息头部，添加Access-Control-Allow-Origin头部     服务器端添加响应头部

2）、使用JSONP

JSONP：JSON with Padding，填充式JSON，与JSON完全两码事，是一种使用JSON数据的方式。意思是在JSON字符串左右添加函数名： doResponse( {"ename":"Tom", "age":20} );

JSONP是专用于解决XHR跨域限制一种手段。基本原理：使用动态创建的一个SCRIPT标签代替XHR发起异步请求，要求服务器必须返回application/javascript，立即在客户端执行——要执行的函数本体在客户端浏览器中声明。

<script src="x.php" async></script>

通常我们使用 script 标签获取并执行一段js代码 而scrip标签和所以拥有src属性的元素一样 不受浏览器同源策略的影响；

如果我们请求的是 doResponse( data ) 同时本地创建了一个 doResponse 函数

结果 就是直接调用了 doResponse 函数  并在其参数组中获得了 我们需要的数据 data

<!doctype html>

<html>

 <head>

  <meta charset="UTF-8">

  <title>...</title>

  <style>

  </style>

 </head>

 <body>

        <h3>使用JSONP解决浏览器跨域问题</h3>

        <hr>

        <button id="btn">发送jsonp请求</button>

        <script type="text/javascript" src="../js/jquery-1.11.3.js"></script>

        <script type="text/javascript">

            $("#btn").click(function(){

                var scri = docuemnt.createElement("script");

                s.src="http://localhost/AJAX/JSONP/1_jsonp.php";

                s.async=true;

            });

        </script>

 </body>

</html>

jQuery中如何使用JSONP发起异步请求：

(1) $.getJSON()

用途1：使用XHR发起异步请求(不能跨域)

$.getJSON('x.php', doResponse)

用途2：使用JSONP发起跨域异步请求

$.getJSON('http://跨域地址/x.php?callback=?', doResponse)

(2) $.ajax() 推荐

用途1：使用XHR发起异步请求(不能跨域)

$.ajax({  })

用途2：使用JSONP发起跨域异步请求

$.ajax({ dataType: 'jsonp' })

jquery 中极度简化了 script 获取后端响应数据的过程 但原理都是一样的；

XHR的跨域请求和JSONP详解的更多相关文章

  1. JavaScript跨域请求和jsonp请求实例

    <script type="text/javascript" src="./whenReady.js"></script> <sc ...

  2. 前端跨域问题相关知识详解（原生js和jquery两种方法实现jsonp跨域）

    1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...

  3. 跨域发送HTTP请求详解

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本篇博客讲述几种跨域发HTTP请求的几种方法,POST请求,GET请求 目录: 一,采用JsonP的方式(只能 ...

  4. 百万年薪python之路 -- 请求跨域和CORS协议详解

    楔子 什么是同源策略 同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.当一个浏览器的两个tab ...

  5. 解决ajax跨域的方法原理详解之Cors方法

    1.神马是跨域(Cross Domain)   对于端口和协议的不同,只能通过后台来解决.   一句话:同一个ip.同一个网络协议.同一个端口,三者都满足就是同一个域,否则就是 跨域问题了.而为什么开 ...

  6. Java跨域问题的处理详解

    1,JavaScript由于安全性方面的考虑,不允许页面跨域调用其他页面的对象,那么问题来了,什么是跨域问题? 答:这是由于浏览器同源策略的限制,现在所有支持JavaScript的浏览器都使用了这个策 ...

  7. node解决跨域和服务器代理详解代码

    node中有很多解决服务器代理的插件,这里简介一个:express-http-proxy 之前网上查的使用node解决跨域的插件,有很多,例如,cors,koa2,这里解决跨域问题我拿原生解决的,ex ...

  8. AJAX学习笔记2：XHR实现跨域资源共享（CORS）以及和JSONP的对比----转载

    1 前言: 首先对参考文章作者表示感谢,你们的经验总结给我们这些新手提供了太多资源.本文致力于解决AJAX的CORS问题,我在逻辑上进行了梳理:首先,系统的总结了CORS问题的起源-同源策略:其次,介 ...

  9. 与跨域相关的 jsonp 劫持与 CORS 配置错误

    参考文章: CORS(跨域资源共享)错误配置漏洞的高级利用 JSONP劫持CORS跨源资源共享漏洞 JSONP绕过CSRF防护token 读取型CSRF-需要交互的内容劫持 跨域资源共享 CORS 详 ...

随机推荐

  1. 分享知识-快乐自己：Hibernate对象的三种状态

    图解: 1):瞬时状态(Transient) 对象与session没有关联,数据库中没有对应的数据. 一般new出来的对象便是瞬时对象. 对瞬时对象使用save()方法便使之成为持久对象. 由于数据库 ...

  2. python-多线程3-生产者消费者

    '''生产者和消费者''' ''' 用python写一个多线程的生产者和消费者 生产者x x>0,有东西,print(不生产) x=0,没东西,print(生产) for循环 消费者x x=0, ...

  3. Linux_服务器_06_VMware虚拟机下安装CentOS7.0图文教程

    二.参考资料 1.VMware虚拟机下安装CentOS7.0图文教程

  4. codeforces 660B B. Seating On Bus(模拟)

    题目链接: B. Seating On Bus time limit per test 1 second memory limit per test 256 megabytes input stand ...

  5. noip模拟赛 #2

    万年rk2 我写挂大家都挂但是有人比我挂的少 我好不容易卡一波常数然后有人ak ... T1.不想写,等会放链接 T2 给一个方阵,每个地方有一个权值,把它划成两块,不能往回拐弯,求两块极差较大的那个 ...

  6. 【Lintcode】069.Binary Tree Level Order Traversal

    题目: Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to ri ...

  7. BZOJ3932：[CQOI2015]任务查询系统

    浅谈主席树:https://www.cnblogs.com/AKMer/p/9956734.html 题目传送门:https://www.lydsy.com/JudgeOnline/problem.p ...

  8. linux 中spfvim安装

    1. 安装 git 1.1 安装依赖的包: curl          curl-devel     zlib-devel         openssl-devel      perl      c ...

  9. TTS API 使用

    #define SPCAT_VOICES           L"HKEY_LOCAL_MACHINE\\SOFTWARE\\Microsoft\\Speech\\Voices" ...

  10. 【win10激活问题】 从【win10专业工作站版】转为 数字许可证的【win10专业版】

    今天安装了 win10 1903 (10.0.18362 暂缺 Build 18362) 安装时 选的 是[win10 专业工作站版] 却无法激活, (因为当初是从win7升级上win10的,只有关联 ...