跨域问题汇总【已收录 CORS JSONP】
原文链接:http://blog.csdn.net/cloudcraft/article/details/8986798
一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题。解决方法有JSONP,Flash等等。
JSONP
原理
我们发现,Web页面上调用js文件时不受是否跨域的影响,凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>。那就是说如果要跨域访问数据,就服务端只能把数据放在js格式的文件里。恰巧我们知道JSON可以简洁的描述复杂数据,而且JSON还被js原生支持,所以在客户端几乎可以随心所欲的处理这种格式的数据。然后客户端就可以通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件。客户端在对JSON文件调用成功之后,也就获得了自己所需的数据。这就形成了JSONP的基本概念。允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
jQuery支持
// jQuery支持JSONP的调用。在另外的一个域名中指定好回调函数名称,就可以用下面的形式来就加载JSON数据。url?callback=?
jQuery.getJSON(url + "&callback=?", function(data) { alert(data.a + data.b);
});
服务器支持
服务端当然也要提供JSONP的支持,其实只要提供读写callback这个params就可以了。
跨域资源共享(CORS)
原理
Cross-Origin Resource Sharing (CORS) 是W3c工作草案,它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方,从而决定请求或响应成功与否。
与JSONP对比
CORS与JSONP相比,更为先进、方便和可靠。 1、 JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。 2、 使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理。 3、 JSONP主要被老的浏览器支持,它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS。
服务器支持
对一个简单的请求,没有自定义头部,要么使用GET,要么使用POST,它的主体是text/plain,请求用一个名叫Orgin的额外的头部发送。Origin头部包含请求页面的头部(协议,域名,端口),这样服务器可以很容易的决定它是否应该提供响应。 服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。 Header set Access-Control-Allow-Origin * 为了防止XSS攻击我们的服务器, 我们可以限制域,比如 Access-Control-Allow-Origin: http://blog.csdn.net 很多服务都已经提供了CORS支持,比如 AWS 支持跨域资源分享功能CORS,向S3上传不需要代理。
转载于:https://www.cnblogs.com/dajie-helloworld/p/7456782.html
跨域问题汇总【已收录 CORS JSONP】相关推荐
- cors跨域资源共享】同源策略和jsonp
在执行下面那段代码的时候,我遇到了一个跨域资源共享的问题 <!doctype html> <html> <head> <meta charset=" ...
- 前端跨域问题汇总及解决方案
"关注 前端开发社区 ,回复" 1" 即可加入 前端技术交流群,回复 " 2" 即可免费领取500G前端干货! 来源 | https://seg ...
- JavaScript跨域方法汇总
原文出处:http://caibaojian.com/javascript-cors.html?ref=myread JSONP JSONP是最常见的跨域数据交互的方式,原理是html的script标 ...
- 浏览器禁止跨域请求json数据解决方法--jsonp
浏览器禁止跨域请求json数据解决方法--jsonp 参考文章: (1)浏览器禁止跨域请求json数据解决方法--jsonp (2)https://www.cnblogs.com/uyisi/p/56 ...
- 跨域解决方案一:使用CORS实现跨域
跨域解决方案一:使用CORS实现跨域 参考文章: (1)跨域解决方案一:使用CORS实现跨域 (2)https://www.cnblogs.com/choon/p/5386150.html (3)ht ...
- 微信小程序跨域问题 post 403 Invalid CORS request 后台
微信小程序跨域问题 post 403 Invalid CORS request 后台
- cors跨域_Spring Boot 中通过 CORS 解决跨域问题
(给ImportNew加星标,提高Java技能) 转自:江南一点雨 今天和小伙伴们来聊一聊通过CORS解决跨域问题. 同源策略 很多人对跨域有一种误解,以为这是前端的事,和后端没关系,其实不是这样的, ...
- WebApi Ajax 跨域请求解决方法(CORS实现)
ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题, 特别各种A ...
- 中止请求和超时 跨域的HTTP请求 认证方式 JSONP
中止请求和超时 一个栗子在上传多少秒以后直接终止请求 // 发起HTTP GEt请求获取指定URl的内容 // 如果响应成功到达,将会传入responseText给回调函数 // 如果响应在timeo ...
最新文章
- 在Git存储库中查找并恢复已删除的文件
- phy芯片测试寄存器_PCIe 5.0首秀!7nm IP方案已成熟!PCIe 5.0的芯片设计有多难?...
- Open Source Bing Maps API for ASP.NET MVC
- 304 vue 启动项目打开页面_Vue搭建项目工程(续)
- 分支限界法实现最优装载c++_分支限界法
- 获取treeview中当前鼠标所指的节点treenode 。
- 为什么在Python中使用string.join(list)而不是list.join(string)?
- linux安装nginx、php
- JSP-session编写购物车
- 移动硬盘突然断电导致坏道产生
- vue 跳转到指定路由地址 (可附带参数)
- 税费申报计算机代码,C语言编写一个计算个人所得税的程序,要求输入收入金额,能够输...
- usc@1113:奖学金
- Unity官方图形教程 学习笔记(三) -- 线性工作流
- Python学习笔记 - Python数据类型
- Mac电脑安装其他系统
- 网心科技获得深圳市“专精特新”中小企业认定
- java电商快递费收取_电商系统设计之运费模板(上)
- 【放置江湖】弱联网手游,网络协议分析修改。每天签到可获得35元宝
- 证书工具+网络插件介绍