跨域解决之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 详 ...
随机推荐
- 统计行数、文件夹个数、文件个数的相关shell命令
极客君最近做项目,刚好遇到需要统计一些sql文件数量的问题,用到一些实用的shell命令,记录下来,以后万一还能用上呢? 如果在终端不打开文件看到一共多少行,则可以使用wc命令来实现: wc -l [ ...
- Day029 JDK8中新日期和时间API (二)
# JDK8中新日期和时间API (二) Instant介绍 Instant:时间线上的一个瞬时点. 这可能被用来记录应用程序中的事件时间 戳. 在处理时间和日期的时候,我们通常会想到年,月,日,时, ...
- week-02
week-02 1.挂载一个lvm,截图给出结果 这个是之前写的,前段时间放到CSDN了 https://blog.csdn.net/weixin_43841942/article/details/1 ...
- 重新整理 .net core 实践篇—————日志系统之战地记者[十五]
前言 本节开始整理日志相关的东西.先整理一下日志的基本原理. 正文 首先介绍一下包: Microsoft.Extengsion.Logging.Abstrations 这个是接口包. Microsof ...
- 人工智能AI Boosting HMC Memory Chip
人工智能AI Boosting HMC Memory Chip Innosilicon的AI Boosting HMC存储芯片适用于高速,高带宽和高性能存储领域,例如AI边缘,数据中心,自动化等. H ...
- 使用multus实现管理网和业务网分离——calico和flannel共存
多个网络层面的需求 一开始为k8s集群搭建了calico网络,所有的容器都用calico对应的网卡进行通信.为了实现网络监控的清爽,想把管理组件,例如日志.统计.监控等组件挪到另外一个网络.于是产生一 ...
- SpringBoot系列——cache缓存
前言 日常开发中,缓存是解决数据库压力的一种方案,通常用于频繁查询的数据,例如新闻中的热点新闻,本文记录springboot中使用cache缓存. 官方文档介绍:https://docs.spring ...
- httprunner的简介、httprunner做接口测试入门知识，使用httprunner模拟get请求及post请求
一.httprunner的简介 HttpRunner 是一款面向 HTTP(S) 协议的通用测试框架,只需编写维护一份 YAML/JSON 脚本,即可实现自动化测试.性能测试.线上监控.持续集成等多种 ...
- python常识系列20-->python利用xlutils修改表格内容
前言 世上的事,只要肯用心去学,没有一件是太晚的.要始终保持敬畏之心,对阳光,对美,对痛楚. 一.xlutils是什么? 是一个提供了许多操作修改excel文件方法的库: 属于python的第三方模块 ...
- 从简单示例看对象的创建过程, 为什么双重检查的单例模式,分析Volatile关键字不能少
编译指令 :javac Test.java 反编译指令: javap -v Test 代码 public class ObjectTest { int m = 8; public static voi ...