跨域解决之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 详 ...
随机推荐
- 5.8-12 watch、which、whereis、locate、updatedb
5.8 watch:监视命令执行情况 watch命令可以以全屏的方式动态显示命令或程序的执行情况. -n 命令执行的间隔时间,默认为2s -d 高亮显示命令结果的变动之处 -t ...
- 对标 Spring Boot & Cloud ，轻量框架 Solon 1.4.12 发布
Solon 是一个轻量的Java基础开发框架.强调,克制 + 简洁 + 开放的原则:力求,更小.更快.更自由的体验.支持:RPC.REST API.MVC.Job.Micro service.WebS ...
- ALD技术，相机去噪，图像传感器
ALD技术,相机去噪,图像传感器 1. 作为镜片的防反射涂层技术被关注的ALD(atomic layer deposition)的引入趋势. (a)为什么需要一种新的防止反射的涂层技术? ALD被认为 ...
- 深度学习LiDAR定位：L3-Net
深度学习LiDAR定位:L3-Net 摘要 本文提出L3-Net--一种新颖的基于学习的LiDAR定位系统,可实现厘米级的定位,与现有最高水平的传统定位算法相媲美.与传统定位算法不同,本文创新地实现了 ...
- TVM Reduction降低算力
TVM Reduction降低算力 这是有关如何降低算力TVM的介绍材料.像sum / max / min这样的关联约简运算符是线性代数运算的典型构造块. 本文将演示如何降低TVM算力. from _ ...
- CodeGen概述
CodeGen概述 CodeGen是在协同开发环境中工作的软件开发人员可以用来生成源代码的工具.该代码可能是Synergy DBL代码,也可能是其他语言的源代码.CodeGen并不局限于为任何特定的开 ...
- 尚硅谷Java——宋红康笔记【day1-day5】
day1 注释 1.java规范的三种注释方式: 单行注释 多行注释 文档注释(java特有) 2. 单行注释和多行注释的作用: ① 对所写的程序进行解释说明,增强可读性.方便自己,方便别人 ② 调试 ...
- SQL 查询语句总是先执行 SELECT？你们都错了
很多 SQL 查询都是以 SELECT 开始的.不过,最近我跟别人解释什么是窗口函数,我在网上搜索"是否可以对窗口函数返回的结果进行过滤"这个问题,得出的结论是"窗口函数 ...
- SqlServer中offset..fetch 的使用问题
好久没更新了,最近忙的很,也生病了,重感冒,555~~~ 早上抽的一丝空闲,来讲讲SqlServer中的分页问题.其实用过了多种数据库,分页这问题已经是老生常谈的问题了.不管是开发什么类型的网站,只要 ...
- 用python的matplotlib根据文件里面的数字画图像折线图
思路:用open打开文件,再用a=filename.readlines()提取每行的数据作为列表的值,然后传递列表给matplotlib并引入对应库画出图像 代码实现:import matplotli ...