首先：什么是跨域？

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

  1. <!doctype html>
  2. <html>
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>...</title>
  6.   <style>
  7.   </style>
  8.  </head>
  9.  <body>
  10.         <h3>使用JSONP解决浏览器跨域问题</h3>
  11.         <hr>
  12.         <button id="btn">发送jsonp请求</button>
  13.         <script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
  14.         <script type="text/javascript">
  15.             $("#btn").click(function(){
  16.                 var scri = docuemnt.createElement("script");
  17.                 s.src="http://localhost/AJAX/JSONP/1_jsonp.php";
  18.                 s.async=true;
  19.             });
  20.         </script>
  21.  </body>
  22. </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. 打造vim成类source insight

    一.Ubuntu14.04下配置 1.配置vimrc文件 输入:version课查看vimrc文件及位置: system vimrc file: "$VIM/vimrc" user ...

  2. Hive- Hive安装

    Hive安装 1.1下载Hive安装包 官网:http://hive.apache.org/downloads.html 个人建议到这里下载:http://apache.forsale.plus/ 1 ...

  3. 使用 DNSPOD API 实现域名动态解析

    0. 简单概述在家里放一个 NAS 服务器,但是宽带的 IP 地址经常改变,一般路由器自带的花生壳域名解析可以解决,如果路由器没有类似功能或者想使用自己的域名,可以尝试使用 DNSPOD API 来实 ...

  4. Use trained sklearn model with pyspark

    Use trained sklearn model with pyspark   from pyspark import SparkContext import numpy as np from sk ...

  5. capsule network——CNN仅仅考虑了“有没有”的问题，没有考虑feature map的结构关系。这个结构关系包括位置，角度等。Capsule layer的输出也跟feature map的max-pooling输出不同，capsule layer的输出是一个向量，这个向量包含了位置，大小，角度等信息，这是feature map仅能输出一个值所不具备的；训练比较慢

    capsule network--<Dynamic Routing Between Capsules> from:https://zhuanlan.zhihu.com/p/31491520 ...

  6. python+selenium自动化测试环境搭建

    selenium 是一个web的自动化测试工具,不少学习功能自动化的同学开始首选selenium ,相因为它相比QTP有诸多有点: *  免费,也不用再为破解QTP而大伤脑筋 *  小巧,对于不同的语 ...

  7. 洛谷 P4238 [模板] 多项式求逆

    题目:https://www.luogu.org/problemnew/show/P4238 看博客:https://www.cnblogs.com/xiefengze1/p/9107752.html ...

  8. Enum定义位域， 即可以通过位操作来产生未命名的值

    通过FlagsAttribute可以实现. // A bit field or flag enumeration of harvesting seasons. [Flags] public enum ...

  9. 基于Html5的移动端APP开发框架

    快速增长的APP应用软件市场,以及智能手机的普及,手机应用:Native(原生)APP快速占领了APP市场,成为了APP开发的主流,但其平台的不通用性,开发成本高,多版本开发等问题,一直困扰着专业AP ...

  10. docker 学习（一）什么是Docker

    项目中用到docker,就学习一下.第一篇是介绍. Sandboxie(沙箱):一个虚拟系统程序,允许你在沙盘环境中运行浏览器或其他程序,因此运行所产生的变化可以随后删除.它创造了一个类似沙盒的独立作 ...