跨域问题是由于浏览器为了防止CSRF攻击(Cross-site request forgery跨站请求伪造),避免恶意攻击而带来的风险而采取的同源策略限制。当一个页面中使用XMLHTTPRequest(XHR请求)对象发送HTTP请求时,必须保证当前页面和请求的对象是同源的,即协议、域名和端口号要完全一致,否则浏览器就会阻止此跨域请求返回的数据。

例如:

http://www.a.com 与 https://www.a.com 是不同源的,它们协议不同

http://www.a.com 与 http://www.b.com 是不同源的,它们域名不同

http://www.a.com:80 与 http://www.a.com:8080 是不同源的,它们端口号不同

http://www.a.com/test1.js 与 http://www.a.com/test2.js 是同源的

跨域请求的解决方案

虽然同源限制可以有效的防止网络上的恶意攻击,但是在实际开发应用中,我们往往需要从本站点向第三方站点发送XHR请求,这就需要有效的解决跨域问题,可以有以下几种:

(1)JSONP:只支持GET,不支持POST请求代理:使用代理去避开跨域请求,例如www.a.com/index.html页面去调用www.b.com/service.jsp,可以通过写一个接口www.a.com/service.jsp,由这个接口在后端去调用www.b.com/service.jsp并取到返回值,然后再返回给index.html。

(2)服务端修改:例如在服务端页面添加header限制:

header('Access-Control-Allow-Origin:*'); //允许所有来源访问

header('Access-Control-Allow-Method:POST,GET'); // 允许访问的方式

由于JSONP是最灵活,也是最常用的方式,这里主要讲解JSONP方式解决跨域问题。

 JSONP原理

浏览器只对XHR(XMLHttpRequest)请求有同源请求限制,而对script标签src属性、link标签ref属性和img标签src属性没有这这种限制,利用这个“漏洞”就可以很好的解决跨域请求。JSONP就是利用了script标签无同源限制的特点来实现的,当向第三方站点请求时,我们可以将此请求放在<script>标签的src属性里,这就如同我们请求一个普通的JS脚本,可以自由的向不同的站点请求:

<script src="http://www.b.com/request?para1=1"></script>

JSONP请求实现

(1)Javascript实现

服务端:

前端:

(2)JQuery实现

JQuery的ajax方法对JSONP方法进行了封装,使用JQuery提供的方法变得非常简单

前端:

详解 JSONP跨域请求的实现的更多相关文章

  1. 【转】solr+ajax智能拼音详解---solr跨域请求

    本文转自:http://blog.csdn.net/wangzhaodong001/article/details/8529090 最近刚做完solr的ajax智能拼音.总结一下. 前端:jQuery ...

  2. jsonp详解及跨域请求

    什么是JSONP? JSON是一种轻量级的数据传输格式语言,被广泛应用于当前Web应用中.JSON格式数据的编码和解析基本在所有主流语言中都被实现,所以现在大部分前后端分离的架构都以JSON格式进行数 ...

  3. .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器

    1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...

  4. JSONP跨域请求数据报错 “Unexpected token :”的解决办法

    原文  http://www.cnphp6.com/archives/65409 Jquery使用ajax方法实现jsonp跨域请求数据的时候报错 “Uncaught SyntaxError: Une ...

  5. jQuery ajax的jsonp跨域请求

    一直在听“跨域跨域”,但是什么是跨域呢?今天做了一些了解.(利用jQuery的jsonp) jQuery使用JSONP跨域 JSONP跨域是利用script脚本允许引用不同域下的js实现的,将回调方法 ...

  6. Django学习---jsonp跨域请求

    jsonp跨域请求 我们通过ajax进行跨域请求的时候,请求发送过去,但是在接受返回数据的时候浏览器会进行拦截. 这是由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源 ...

  7. jsonp跨域请求响应结果处理函数(python)

    接口测试跨域请求接口用的jsonp,需要将回调函数里的json字符串提取出来. jsonp跨域请求的响应结果格式: callback_functionname(json字符串). #coding:ut ...

  8. 原生JavaScript封装的jsonp跨域请求

    原生JavaScript封装的jsonp跨域请求 <!DOCTYPE html> <html lang="en"> <head> <met ...

  9. jQuery jsonp跨域请求详解

    跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面是相同的,则两个页面具 ...

随机推荐

  1. [转]docker基础详解

    本文转自:https://blog.csdn.net/xsj_blog/article/details/71700032 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog ...

  2. C# 实现Jwtbearer Authentication

    Jwtbearer Authentication 什么是JWT JWT(JSON Web Token), 顾名思义就是在Web上以JSON格式传输的Token(RFC 7519). 该Token被设计 ...

  3. vim撤销undo与反撤销redo

    普通模式下  u 撤销 ctrl + r 反撤销

  4. 菜鸟入门【ASP.NET Core】15:MVC开发:ReturnUrl实现、Model后端验证 、Model前端验证

    ReturnUrl实现 我们要实现returnUrl,我们需要在注册(Register)方法中接收传进的returnUrl并给它默认值null,然后将它保存在ViewData里面 然后我们定义一个内部 ...

  5. 路由器动态DNS设置

    路由器中的动态DNS设置非常的简单,只需要注册动态域名服务商的账号,然后在路由器中登录该账号就可以了 一.路由器动态DNS作用 无线路由器连接宽带上网后,路由器会从宽带运营商那里获取一个IP地址,这个 ...

  6. MyBatis:CRUD功能

    在前面已经自动生成了mapper和pojo,接下来我们实现mybatis的CRUD功能,先新建service.controller层的方法. 这里的sid是一个开源的id生成类,写完后,我们还需要在启 ...

  7. constructor C++ example

    The constructor for this class could be defined, as usual, as:   Rectangle::Rectangle (int x, int y) ...

  8. endpoint 异常

    原文地址:http://blog.csdn.net/ltylove2007/article/details/6128333 其他信息: 无法加载协定为“ServiceReference1.WebSer ...

  9. Mobius反演的套路

    T1 \(\sum_{i=1}^N \sum_{j=1}^M [(i,j)=1]\) \(f(d)=\sum_{i=1}^N \sum_{j=1}^M [(i,j)=d]\) \(g(d)=\sum_ ...

  10. 算法:输入一个链表,输出该链表中倒数第k个结点。

    算法:输入一个链表,输出该链表中倒数第k个结点.<剑指offer> 思路加到注释里面了: 1:两个if判断是否返回值为空,首个为空,没有第k个值: 2:for循环找到倒数第k个值,返回为a ...