【综合】JS跨域方案JSONP与CORS跨域

缘由：

　　因为浏览器的同源策略，即是浏览器之间要隔离不同域的内容，禁止互相操作，提高安全性。

为何要跨域:

　　有时候你想通过自己的网站去获取另一个自己的网站的一些资料信息，但是由于两者域名不同，所以就被同源策略隔离了，那么这个时候就需要了解一下浏览器的跨域问题。

跨域的两种方案对比：

　　JSONP与CORS的使用目的相同，并且都需要服务端和客户端同时支持，虽然功能上讲CORS更为强大，但是需要根据应用场景选择使用哪一个。

1、JSONP（json with padding 填充式json），利用了使用src引用静态资源时不受跨域限制的机制。主要在客户端搞一个回调做一些数据接收与操作的处理，并把这个回调函数名告知服务端，而服务端需要做的是按照javascript的语法把数据放到约定好的回调函数之中即可。jQuery很早之前就已经吧JSONP语法糖化了，使用起来会更加方便。

2、CORS（Cross-origin resource sharing 跨域资源共享），依附于AJAX，通过添加HTTP Hearder部分字段请求与获取有权限访问的资源。CORS对开发者是透明的，因为浏览器会自动根据请求的情况（简单和复杂）做出不同的处理。CORS的关键是服务端的配置支持。由于CORS是W3C中一项较“新”的方案，以至于各大网页解析引擎还没有对其进行严格规格的实现，所以不同引擎下可能会有一些不一致。【兼容性较差】在前文看到同源策略的时候，不知道大家有没有想过，难道就不能让两个跨域的站点写一个秘密的协议，达成一种交易从而使得两者可以进行跨域操作获取数据之类的吗？嗯，我个人觉得cors做的就是这件事。要想实现cors跨域，需要做的就是两件事，一个是我们的浏览器要支持cors跨域这一操作（主流谷歌和火狐均支持，ie版本要高于ie10才行），另外，我们的服务器端必须要设置好Access-Control-Allow-Origin从而支持跨域操作。

优缺点对比：

　　1、jsonp的优点是兼容所有的浏览器，无论是主流的还是以前的。而它的缺点则是由于jsonp发起的请求是get方式的，即参数是填充在请求地址上，所以这种方式发送的数据有限制。虽然目前主流浏览器支持CORS，但IE10以下不支持CORS。

　　2、JSONP只能用于获取资源（即只读，类似于GET请求）；CORS支持所有类型的HTTP请求，功能完善。（这点JSONP被玩虐，但大部分情况下GET已经能满足需求了）cors相对于jsonp而言的好处就是支持所有的请求方式，不止是get请求，还支持post,put请求等等，而它的缺点就很明显，无法兼容所有的浏览器，对于要兼容到老式浏览器而言，还是使用jsonp好点。

参考原文：

https://www.zhihu.com/question/41992168/answer/217903179

https://www.cnblogs.com/jelly7723/p/5494330.html

转载于:https://www.cnblogs.com/bitkuang/p/9862391.html

【综合】JS跨域方案JSONP与CORS跨域相关推荐

php cors和jsonp,jsonp和CORS跨域实现
搜索热词写js时总是会遇到跨域请求的问题,现在了解了两种方法,记录之: 1)jsonp,使用jquery封装的$.ajax,返回数据类型要设置为jsonp,示例: $.ajax({ type: 'g ...
循序渐进Python3（十一） --6-- Ajax 实现跨域请求 jsonp 和 cors
Ajax操作如何实现跨域请求? Ajax (XMLHttpRequest)请求受到同源策略的限制. Ajax通过XMLHttpRequest能够与远程的服务器进行信息交互,另外XMLHttpReque ...
跨域请求——jsonp与cors
一.jsonp 首先我们来想一想为什么会有跨域这个名词的出现呢? 跨域又是什么呢?为何要跨域? 浏览器的同源策略又是什么?怎么解决? jsonp又是什么? 跨域的原理又是什么呢? 名词解释: 跨域: ...
跨域与jsonp及cors解决
1. 什么是跨域? 跨域一词从字面意思看,就是跨域名嘛,但实际上跨域的范围绝对不止那么狭隘.具体概念如下:只要协议.域名.端口有任何一个不同,都被当作是不同的域.之所以会产生跨域这个问题呢,其实也很容 ...
java重定向跨域问题_重定向 CORS 跨域请求
TL;DR 非简单请求不可重定向,包括第一个preflight请求和第二个真正的请求都不行. 简单请求可以重定向任意多次,但如需兼容多数浏览器,只可进行一次重定向. 中间服务器应当同样配置相关 COR ...
jsonp和CORS跨域实现
一.jsonp,使用jquery封装的$.ajax,返回数据类型要设置为jsonp 示例: $.ajax({type: 'get',contentType: "application/jso ...
php配置cors跨域漏洞怎么修复,CORS跨域漏洞的简单认识
CORS CORS(Cross-origin resource sharing),又称跨域资源共享.CORS的内容不叙述,可以阅读MDN文档.或者,阅读这篇文章:跨域资源共享 CORS 详解,同时还需 ...
php 跨域 json,jsonp+php实现跨域
jsonp跨域原理 json和jsonp的区别 json是一种基于文本的数据交换方式,或者叫做描述数据的一种格式. var person = { "name": "tes ...
gorilla websocket无法跨域_聊聊浏览器同源策略与跨域方案详解
开发出高性能的 Web 应用固然重要,但安全问题也不容小觑.本文我们继续以 HTTP 为线索,展开来讲一讲浏览器安全相关的同源策略. 浏览器的同源策略(Same Origin Policy) 源(Or ...

【综合】JS跨域方案JSONP与CORS跨域

【综合】JS跨域方案JSONP与CORS跨域相关推荐

最新文章

热门文章