JSONP和CORS两种跨域方式的介绍和方案实例

随着软件开发分工趋于精细，前后端开发分离成为趋势，前端同事负责前端页面的展示及页面逻辑处理，服务端同事负责业务逻辑处理同时通过API为前端提供数据也为前端提供数据的持久化能力，考虑到前后端同事开发工具和习惯的不同，必然需要将前后端项目进行独立，再者考虑到网站访问速度的问题，需要将静态资源部署到CDN服务器上这样项目分离也成为了必然。然而项目分离部署分离带来的问题就是跨域请求的问题，本例对比较流行的两种跨域访问方式（Jsonp和CORS）进行讨论。

一、JSONP跨域和CORS跨域

1.1、什么是跨域？

跨域：指的是浏览器不能执行其它网站的脚本，它是由浏览器的同源策略造成的，是浏览器的安全限制！

1.2、同源策略

同源策略：域名、协议、端口均相同。

浏览器执行JavaScript脚本时，会检查这个脚本属于那个页面，如果不是同源页面，就不会被执行。

1.3、JSONP跨域

只支持GET请求，不支持POST等其它请求，也不支持复杂请求，只支持简单请求。

1.4、CORS跨域

支持所有的请求，包含GET、POST、OPTOIN、PUT、DELETE等。既支持复杂请求，也支持简单请求。

1.5、JSONP和CORS跨域理解

使用目的： JSONP与CORS的使用目的相同，并且都需要服务端和客户端同时支持，但CORS的功能更加强大。
JSONP（json with padding 填充式json）：利用了使用src引用静态资源时不受跨域限制的机制。主要在客户端搞一个回调做一些参数接收与操作的处理，并把这个回调函数告知服务器，而服务器端需要做的是按照JavaScript的语法把数据放到约定好的回调函数之中即可，jQuery很早之前就已经把JSONP语法糖化了，使用起来会更加方便。
CORS（Cross-origin resource sharing 跨域资源共享）：依附于AJAX，通过添加HTTP Header部分字段请求与获取有权限访问的资源。CORS对开发者是透明的，因为浏览器会自动根据请求的情况（简单和复杂）做出不同的处理。CORS的关键是服务器端的配置支持，由于CORS是W3C中一项较“新”的方案，以至于各大网页解析引擎还没有对齐进行严格规格的实现，所以不同引擎下可能会有一些不一致。

1.6、JSONP和CORS的优缺点

1. JSONP的主要优势在于对浏览器的支持较好；虽然目前主流浏览器都支持CORS，但IE9及以下不支持CORS。

2. JSONP只能用于获取资源（即只读，类似于GET请求）；CORS支持所有类型的HTTP请求，功能完善。（这点JSONP被玩虐，但大部分情况下GET已经能满足需求了）
JSONP的错误处理机制并不完善，我们没办法进行错误处理；而CORS可以通过onerror事件监听错误，并且浏览器控制台会看到报错信息，利于排查。

3. JSONP只会发一次请求；而对于复杂请求，CORS会发两次请求。

4. 始终觉得安全性这个东西是相对的，没有绝对的安全，也做不到绝对的安全。毕竟JSONP并不是跨域规范，它存在很明显的安全问题：callback参数注入和资源访问授权设置。CORS好歹也算是个跨域规范，在资源访问授权方面进行了限制（Access-Control-Allow-Origin），而且标准浏览器都做了安全限制，比如拒绝手动设置origin字段，相对来说是安全了一点。但是回过头来看一下，就算是不安全的JSONP，我们依然可以在服务端端进行一些权限的限制，服务端和客户端也都依然可以做一些注入的安全处理，哪怕被攻克，它也只能读一些东西。就算是比较安全的CORS，同样可以在服务端设置出现漏洞或者不在浏览器的跨域限制环境下进行攻击，而且它不仅可以读，还可以写。

1.7、应用场景

如果需要兼容IE低版本浏览器，无疑，JSONP。
如果需要对服务端资源进行操作，无疑，CORS。
其他情况的话，根据自己的对需求的分析来决定和使用。

相同协议、域名、端口下

页面在 http://localhost:3000/0
服务在 http://localhost:3000/1

二、简要介绍

2.1、JSONP

　　JSONP是利用浏览器对script的资源引用没有同源限制，通过动态插入一个script标签，当资源加载到页面后会立即执行的原理实现跨域的。JSONP是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback或者开始就定义一个回调方法，参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
　　JSONP只支持GET请求而不支持POST等其它类型的HTTP请求,它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题，JSONP的优势在于支持老式浏览器，弊端也比较明显：需要客户端和服务端定制进行开发，服务端返回的数据不能是标准的Json数据，而是callback包裹的数据。

2.2、CORS

　　CORS是现代浏览器支持跨域资源请求的一种方式，全称是"跨域资源共享"（Cross-origin resource sharing），当使用XMLHttpRequest发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin;浏览器判断该相应头中是否包含Origin的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。
　　CORS与JSONP的使用目的相同，但是比JSONP更强大，CORS支持所有的浏览器请求类型，承载的请求数据量更大，开放更简洁，服务端只需要将处理后的数据直接返回，不需要再特殊处理。

client端

url:

#url
from app01 import views
urlpatterns = [path('admin/', admin.site.urls),path('index/', views.index),path('server/', views.verser),
]

views:

from django.shortcuts import render,HttpResponse# Create your views here.def index(request):return render(request,'index.html')def server(request):return HttpResponse('YES I DO')

template:------->>index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>jsonp1</h1><button class="get_server">Jsonp</button><script src="/statics/js/jquery-3.3.1.min.js"></script><script type="text/javascript">$('.get_server').click(function () {$.ajax({url:'http://127.0.0.1:9000/server/',success:function (data) {console.log(data)}})})</script>
</body>
</html>

server端

url:

from app01 import views
urlpatterns = [path('admin/', admin.site.urls),path('index/', views.index),path('server/', views.server),
]

views:

from django.shortcuts import render,HttpResponse
import json# Create your views here.def index(request):return render(request,'index.html')def server(request):print('hello world')return HttpResponse('HELLO WORLD!')

template:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h2>hello world</h2>
<button class="get_server">Jsonp2</button>
<script src="/statics/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">$('.get_server').click(function () {$.ajax({url:'/server/',success:function (data) {console.log(data)}})})
</script>
</body>
</html>

JSONP和CORS两种跨域方式的介绍和方案实例相关推荐

JavaScript 九种跨域方式实现原理
前言前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容. 一.什么是跨域? 1.什么是同源策略及其限制内容? 同源策略是一种约定,它是浏览器最核心也最基本的安全 ...
九种跨域方式实现原理
前言前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容. 本文完整的源代码请猛戳github 博客一.什么是跨域? 1.什么是同源策略及其限制内容? 同源策略 ...
JavaScript 九种跨域方式实现原理 1
前言前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容. 一.什么是跨域? 1.什么是同源策略及其限制内容? 同源策略是一种约定,它是浏览器最核心也最基本的安全 ...
九种跨域方式的实现原理，第一个就超惊艳！| 技术头条
作者 | 浪里行舟责编 | 胡巍巍前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这正是本文要探讨的内容. 什么是跨域? 1.什么是同源策略及其限制内容? 同源策略是一种约定, ...
KSO-.NETCore中实现跨域的代码以及几种跨域方式
跨域指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器施加的安全限制. 所谓同源是指,域名,协议,端口均相同,只要有一个不同,就是跨域,同源策略(Sameoriginpoli ...
C语言字符数组显示钻石,c++两种字符串赋值方式并介绍 C语言下遍历目录文件的方式...
c++字符串声明:一种是声明字符数组并赋值,另一种是直接声明string类 #define _CRT_SECURE_NO_WARNINGS #include #include #include &qu ...
cors跨域_Nginx通过CORS配置实现跨域访问
什么是跨域跨域是指跨域名的访问,以下情况都属于跨域: 跨域原因说明示例域名不同 www.jd.com 与 www.taobao.com 域名相同,端口不同 www.jd.com:8080 与 w ...
jsonp-反向代理-CORS解决JS跨域问题的个人总结
jsonp-反向代理-CORS解决JS跨域问题的个人总结网上说了很多很多,但是看完之后还是很混乱,所以我自己重新总结一下. 解决 js 跨域问题一共有8种方法, jsonp(只支持 get) 反向代 ...
springboot中通过cors协议解决跨域问题
2019独角兽企业重金招聘Python工程师标准>>> 1.对于前后端分离的项目来说,如果前端项目与后端项目部署在两个不同的域下,那么势必会引起跨域问题的出现. 针对跨域问题,我们可 ...
敞开心扉，来聊聊跨域方式吧！
跨域方式 JSONP jsonp是一种非正式的传输协议跨域原理: 利用了src不受同源策略的影响 ,可以访问其他页面的数据. 注意:jsonp并不能解决所有的跨域问题,因为使用jsonp跨域需要被提 ...

JSONP和CORS两种跨域方式的介绍和方案实例

JSONP和CORS两种跨域方式的介绍和方案实例相关推荐

最新文章

热门文章