首先：什么是跨域？

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. 在EditText插入表情，并发送表情

    在EditText插入表情,点击发送按钮,将qq表情显示在TextView中: [mw_shl_code=java,true]public class EditTextActivity extends ...

  2. L94

    Early-morning births are genetically programmed THE notion that nothing good happens after midnight ...

  3. L87

    Fear Makes Art More Engaging Emmanuel Kant spoke often about the sublime, and specifically how art b ...

  4. Spring笔记04（DI（给属性赋值），自动装配（autowire））

    给不同数据类型注入值: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="h ...

  5. python爬虫知识点总结(一)库的安装

    环境要求: 1.编程语言版本python3: 2.系统:win10; 3.浏览器:Chrome68.0.3440.75:(如果不是最新版有可能影响到程序执行) 4.chromedriver2.41 注 ...

  6. C# 线程的暂停和恢复的 实现

    我们可以通过ManualResetEvent类来实现. 声明, 初始化时不执行 private static ManualResetEvent _eventWorkList = new ManualR ...

  7. RT-Thread信号量使用(动态/静态信号量) 及 信号量的四种使用场合

    信号量(Semaphore),有时被称为信号灯,是在多线程环境下使用的一种设施,是可以用来保证两个或多个关键代码段不被并发调用.在进入一个关键代码段之前,线程必须获取一个信号量:一旦该关键代码段完成了 ...

  8. 响应式web设计，html5和css3实战（@author Ben Fraim）

    重定向 //请求重定向简化写法 response.sendRedirect("/day09/adv.html"); 转发 request.getRequestDispatcher( ...

  9. 数据结构&算法 索引

    最近在看牛客网的算法课,准备开个坑,根据自己的理解,把课程讲到的内容列一个大纲,明年找工作的时候用. 再加上看算法第四版的内容,整理一套明年找工作能够直接拿出来用的代码. 此篇博文作为索引.

  10. win764位安装mysql-5.6

    1配置mysql的MYSQL_HOME和PATH 增加环境变量: MYSQL_HOME=D:\mysql-5.6.14-winx64 修改环境变脸: 在path后面增加%MYSQL_HOME%\bin ...