跨域解决之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 详 ...
随机推荐
- Linux shell脚本全面学习（一）
1. Linux 脚本编写基础 1.1 语法基本介绍 1.1.1 开头 程序必须以下面的行开始(必须方在文件的第一行): #!/bin/sh 符号#!用来告诉系统它后面的参数是用来执行该文件的程序.在 ...
- 思考一个问题STM32的
如果一个定时中断刚刚进入中断服务函数 但是服务函数执行时间太长 又一次触发了中断 会怎样
- Python中字符串转换列表
前言:在使用Python完成工作中一些任务的时候,常常要对数据类型进行转换,比如字符串转列表,列表转字符串,字符串转元组等等,下面分享一下常用的字符串转列表 字符串转列表 第一种字符串转列表: t_s ...
- 痞子衡嵌入式：串行NAND Flash的两大特性导致其在i.MXRT FlexSPI下无法XiP
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是串行NAND Flash的两大特性导致其在i.MXRT FlexSPI下无法XiP. 在嵌入式世界里,当我们提起XiP设备(支持代码原地 ...
- anaconda同时集成Python2 和 Python3
参考帖子,亲测有效: 利用anaconda同时使用python2和python3的方法 注意:最后一步是再对应的python环境中输入:conda install anaconda
- TensorFlow用法
TensorFlow用法 什么是TensorFlow TensorFlow是一个开源软件库,用于使用数据流图进行数值计算.图中的节点表示数学运算,而图的边缘表示流动的多维数据数组(张量).这种灵活的体 ...
- NVIDIA GPU上的直接线性求解器
NVIDIA GPU上的直接线性求解器 NVIDIA cuSOLVER库提供了密集且稀疏的直接线性求解器和本征求解器的集合,它们为计算机视觉,CFD,计算化学和线性优化应用程序提供了显着的加速.cuS ...
- 机器学习PAL基本概念
机器学习PAL基本概念 本文介绍PAI-Studio.PAI-DSW及PAI-EAS的基本概念. PAI-Studio PAI-DSW PAI-EAS
- L4自动驾驶技术
L4自动驾驶技术 一．SAE的五个级别分别是: L0:驾驶员完全掌控车辆,无任何自动化能力. L1:自动系统有时能够辅助驾驶员完成某些驾驶任务.比如高速自动巡航(自动认知所在车道),和一些驾驶辅助功能 ...
- 英特尔® 至强® 平台集成 AI 加速构建数据中心智慧网络
英特尔 至强 平台集成 AI 加速构建数据中心智慧网络 SNA 通过 AI 方法来实时感知网络状态,基于网络数据分析来实现自动化部署和风险预测,从而让企业网络能更智能.更高效地为最终用户业务提供支撑. ...