跨域解决之JSONP和CORS的详细介绍
JSONP跨域和CORS跨域
什么是跨域？
跨域：指的是浏览器不能执行其它网站的脚本，它是由浏览器的同源策略造成的，是浏览器的安全限制！
同源策略
同源策略：域名、协议、端口均相同。
浏览器执行JavaScript脚本时，会检查这个脚本属于那个页面，如果不是同源页面，就不会被执行。
JSONP跨域
只支持GET请求，不支持POST等其它请求，也不支持复杂请求，只支持简单请求。
CORS跨域
支持所有的请求，包含GET、POST、OPTOIN、PUT、DELETE等。既支持复杂请求，也支持简单请求。
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中一项较“新”的方案，以至于各大网页解析引擎还没有对齐进行严格规格的实现，所以不同引擎下可能会有一些不一致。
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，同样可以在服务端设置出现漏洞或者不在浏览器的跨域限制环境下进行攻击，而且它不仅可以读，还可以写。
应用场景
- 如果需要兼容IE低版本浏览器，无疑，JSONP。
- 如果需要对服务端资源进行操作，无疑，CORS。
- 其他情况的话，根据自己的对需求的分析来决定和使用。
相同协议、域名、端口下
- 页面在 http://localhost:3000/0
- 服务在 http://localhost:3000/1
- 控制台能正常输出 {name: '', sex: '', _stamp: ''}
views/0.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style> </style>
</head>
<body>
<form action="/" onsubmit="return false">
<label for="name">NAME</label><input type="text" id="name" name="name"><br>
<label for="sex">SEX</label><input type="text" id="sex" name="sex"><br>
<input type="submit" value="SUBMIT">
</form>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$('form').on('submit', function(){
$.ajax({
url: 'http://localhost:3000/1',
data: {
name: $('#name').val(),
sex: $('#sex').val()
},
success: function(data){
console.log(data);
}
})
})
</script>
</body>
</html>
serve.js
const server = require('express')();
server.set('view engine', 'ejs');
server.get('/0', (req, res) => {
res.render('0.ejs', {});
})
server.get('/1', (req, res) => {
let {name, sex} = req.query;
res.send({name, sex, _stamp: + new Date});
})
server.listen(3000);
JSONP
把0.ejs改为0.hmtl，直接打开或者在http://localhost:3001/views/0.html打开（3000端口被占用时运行$ browser-sync start --server --files '**'）
控制台报错 Access to XMLHttpRequest at 'http://localhost:3000/1?name=&sex=' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
jQuery 的 JSONP
0.html 的脚本改为
function jCb(data){ // 这个函数和ajax 的 success 同样可以操作 data
console.log('你要的', data);
}
$('form').on('submit', function(){
$.ajax({
url: 'http://localhost:3000/1',
data: {
name: $('#name').val(),
sex: $('#sex').val()
},
dataType: 'jsonp',
jsonpCallback: 'jCb', // 服务端 req.query.callback = 'jCb'
success: function(data){
console.log(data);
}
})
})
server.js 注意返回客户端的字符串的拼接
const server = require('express')();
server.get('/1', (req, res) => {
let {name, sex, callback} = req.query;
var data = "{name: '', sex: '', _stamp: ''}"; // 然后再在单引号处拼接
data = "{name: '" + name + "', sex: '" + sex + "', _stamp:' " + Date.now() + "'}";
data = `{name: '${name}', sex: '${sex}', _stamp: '${+ new Date}'}`
var resStr = callback + "()"
resStr = callback + "(" + data + ")"
console.log(callback, typeof callback); // jCb string
console.log(resStr, typeof resStr); // jCb({name:'',sex:'',_stamp:'1542456915800'}) string
res.send(resStr);
})
server.listen(3000);
利用 script 标签
0.html
<script>
function jCb(data) {
console.log("jsonpCallback: " + data.name)
}
</script>
<script src = 'http://localhost:3000/1?jsonp=jsonpCallback'></script>
server.js server.get('/1', (req, res) => {
var data = 'var data = {name: $("#name").val(), sex: $("#sex").val(), _stamp: + new Date };'
var debug = 'console.log(data);'
var callback = '$("form").submit(function(){' + data + req.query.jsonp + '(data);' + debug + '});'
res.send(callback);
})
CORS
html 代码还是最初的代码，server.js 改变
server.get('/1', (req, res) => {
// 设置可以请求的域名，"*" 代表所有域名
res.header("Access-Control-Allow-Origin", "http://localhost:3001");
// 设置所允许的HTTP请求方法。
res.header("Access-Control-Allow-Methods", "OPTIONS, GET, PUT, POST, DELETE");
// 字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段。
res.header("Access-Control-Allow-Headers", "x-requested-with, accept, origin, content-type");
// 服务器收到请求以后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应。
// Content-Type表示具体请求中的媒体类型信息。
res.header("Content-Type", "application/json;charset=utf-8");
// 该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。
// 当设置成允许请求携带cookie时，需要保证"Access-Control-Allow-Origin"是服务器有的域名，而不能是"*"。
res.header("Access-Control-Allow-Credentials", true);
// 该字段可选，用来指定本次预检请求的有效期，单位为秒。
// 当请求方法是PUT或DELETE等特殊方法或者Content-Type字段的类型是application/json时，服务器会提前发送一次请求进行验证
// 下面的的设置只本次验证的有效时间，即在该时间段内服务端可以不用进行验证
res.header("Access-Control-Max-Age", 300);
/*
CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：
Cache-Control、
Content-Language、
Content-Type、
Expires、
Last-Modified、
Pragma。
*/
// 需要获取其他字段时，使用Access-Control-Expose-Headers，
// getResponseHeader('myData')可以返回我们所需的值
res.header("Access-Control-Expose-Headers", "myData");
let {name, sex} = req.query;
res.send({name, sex, _stamp: + new Date});
})
参考文章:
文章同步发布： https://www.geek-share.com/detail/2753888135.html
跨域解决之JSONP和CORS的详细介绍的更多相关文章
- 学习AJAX必知必会（4）~同源策略、解决跨域问题（JSONP、CORS）
一.同源策略(Same-Origin Policy),是浏览器的一种安全策略. 1.同源(即url相同):协议.域名.端口号 必须完全相同.(请求是来自同一个服务) 2.跨域:违背了同源策略,即跨域. ...
- Ajax操作如何实现跨域请求 （JSONP和CORS实现Ajax跨域的原理）
由于浏览器存在同源策略机制,同源策略阻止ajax (XMLHttpRequest) 从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响 ...
- JavaScript跨域调用、JSONP、CORS与ASP.NET Web API[共8篇]
[第1篇] 同源策略与JSONP 浏览器是访问Internet的工具,也是客户端应用的宿主,它为客户端应用提供一个寄宿和运行的环境.而这里所说的应用,基本是指在浏览器中执行的客户端JavaScript ...
- 【PHP】Ajax跨域解决方案 、jsonp、cors
参考文章: 1.https://blog.csdn.net/u014727260/article/details/72793459 (后台java,实际上差不多) 2. 如何解决ajax跨域传输 数据 ...
- 跨域漏洞丨JSONP和CORS跨域资源共享
进入正文之前,我们先来解决个小问题,什么是跨域? 跨域:指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器的安全限制! 跨域常见的两种方式,分别是JSONP和CORS. 今天i ...
- Django跨域请求之JSONP和CORS
现在来新建一个Django项目server01,url配置为 url(r'^getData.html$',views.get_data) 其对应的视图函数为get_data: from django. ...
- 跨域常见解决方案jsonp，cors示例
方案 JSONP jsonp需要后端进行配置,并且前端需要动态生成script标签通过callback调用函数进行操作的跨域解决方案 不建议使用该方案: 前后端均需进行配置处理,增加了工作量 ...
- JSONP和CORS两种跨域方式的优缺点及使用方法原理介绍
随着软件开发分工趋于精细,前后端开发分离成为趋势,前端同事负责前端页面的展示及页面逻辑处理,服务端同事负责业务逻辑处理同时通过API为前端提供数据也为前端提供数据的持久化能力,考虑到前后端同事开发工具 ...
- 与跨域相关的 jsonp 劫持与 CORS 配置错误
参考文章: CORS(跨域资源共享)错误配置漏洞的高级利用 JSONP劫持CORS跨源资源共享漏洞 JSONP绕过CSRF防护token 读取型CSRF-需要交互的内容劫持 跨域资源共享 CORS 详 ...
随机推荐
- 《Matlab实用案例》系列Matlab从入门到精通实用100例案例教程目录（持续更新）
目录 1. 专栏简介 2. 专栏地址 3. 专栏目录 1. 专栏简介 2. 专栏地址 「 刘一哥与GIS的故事 」之<Matlab使用案例> 3. 专栏目录 [MATLAB统计分析与应用1 ...
- web容器获取SSL指纹实现和ByPass
@font-face { font-family: octicons-link; src: url("data:font/woff;charset=utf-8;base64,d09GRgAB ...
- RabbitMaClientPoll
import pika import threading import random import uuid import json # 框架模块 from django.conf import se ...
- 书列荐书 |《滚雪球：巴菲特和他的财富人生》【美】艾丽斯·施罗德著
一开始听说这本书比较不错,但是比较搞笑的是,我买了之后才发现还有个下册.于是我决定把书退回去,并用了两天的时间把它给看完了..基本看的差不多了. 沃伦·巴菲特从上小学,初中,高中就已经变得有经济头脑了 ...
- GStreamer 1.18.4稳定的错误修复版本
GStreamer 1.18.4稳定的错误修复版本GStreamer团队宣布最喜欢的跨平台多媒体框架的稳定的1.18版本系列中的另一个错误修复版本!此版本仅包含错误修复和重要的安全修复程序,并且从1. ...
- 3D重建算法原理
3D重建算法原理 三维重建(3D Reconstruction)技术一直是计算机图形学和计算机视觉领域的一个热点课题.早期的三维重建技术通常以二维图像作为输入,重建出场景中的三维模型.但是,受限于输入 ...
- H.264/H265码流解析
H.264/H265码流解析 一．H.264码流解析 一个原始的H.264 NALU 单元常由 [StartCode] [NALU Header] [NALU Payload] 三部分组成 一个原始的 ...
- OneFlow 并行特色
OneFlow 并行特色 在 Consistent 与 Mirrored 视角中,已经知道 OneFlow 提供了 mirrored 与 consistent 两种看待分布式系统的视角,并且提前知道了 ...
- MinkowskiPooling池化（上）
MinkowskiPooling池化(上) 如果内核大小等于跨步大小(例如kernel_size = [2,1],跨步= [2,1]),则引擎将更快地生成与池化函数相对应的输入输出映射. 如果使用U网 ...
- TensorFlow神经网络集成方案
TensorFlow神经网络集成方案 创造张力流create_tensorflow_neuropod 将TensorFlow模型打包为neuropod包. create_tensorflow_neur ...