面试--跨域--cors

cors是什么

cors 跨域资源共享 Cross-origin resource sharing是一种跨域的解决方案 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。 但是需要浏览器的支持。
值得注意的是:
整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信(只要在服务器端设置了就行)与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现是cors情况的AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。

浏览器对跨域资源请求的分类

浏览器将cors请求分为两类:简单请求 非简单请求。
简单请求同时满足以下两个要求:

(1) 请求方法是以下三种方法之一:
HEAD
GET
POST
(2)HTTP的头信息不超出以下几种字段:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

不能够同时满足以上两个条件的请求就是非简单请求。

浏览器发起cors简单请求

对于简单请求,浏览器直接发出CORS请求。具体来说,就是在头信息之中,增加一个Origin字段。如下就是一个浏览器发简单请求的 请求报文的头部信息

GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

上面的头信息中,Origin字段用来说明,本次请求来自哪个源(协议 + 域名 + 端口)。本实例中请求是来自 http://api.bob.com 服务器根据这个值,决定是否同意这次请求。
如果Origin指定的域名在许可范围内,服务器返回的响应,会多出几个头信息字段。

Access-Control-Allow-Origin: http://api.bob.com  //必须的 请求时Origin值或者一个*
Access-Control-Allow-Credentials: true //可选的  服务器许可请求中可有Cookie,一起发给服务器。
Access-Control-Expose-Headers: FooBar  //可选的  1、
Content-Type: text/html; charset=utf-8

1、XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定。上面的例子指定,getResponseHeader('FooBar')可以返回FooBar字段的值
浏览器发起简单cors请求的时候自动发送cookie
浏览器发送CORS请求是默认不发送Cookie和HTTP认证信息
如果要把Cookie发到服务器,
一方面要服务器同意,指定Access-Control-Allow-Credentials字段。

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

如果在服务器返回的响应中没有以上的字段 就说明这次跨域是不成功的。

浏览器发送非简单cors请求

非简单请求是那种对服务器有特殊要求的请求,比如请求方法是PUT或DELETE,或者Content-Type字段的类型是application/json。
下面是就是一个非简单请求。

var url = 'http://api.alice.com/cors';
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send();

发起非简单请求有如下步骤

1、 预检请求

非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。
浏览器首先发送请求询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。
浏览器发送一个非简单请求之前,就自动发出一个"预检"请求,要求服务器确认可以这样请求。下面是这个"预检"请求的HTTP头信息。

OPTIONS /cors HTTP/1.1
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

"预检"请求用的请求方法是OPTIONS,表示这个请求是用来询问服务器支持什么请求方法的。
"预检"请求的头信息包括两个特殊字段。
(1)Access-Control-Request-Method
该字段是必须的,用来列出浏览器的CORS请求会用到哪些HTTP方法,上例是PUT。
(2)Access-Control-Request-Headers
该字段是一个逗号分隔的字符串,指定浏览器CORS请求会额外发送的头信息字段,上例是X-Custom-Header。
服务器返回的针对预检请求的响应

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://api.bob.com   //表示哪个源可以跨域请求资源  origin的值或者*
Access-Control-Allow-Methods: GET, POST, PUT    //服务器支持的所有跨域请求的方法
Access-Control-Allow-Headers: X-Custom-Header   //服务器支持的所有头信息字段
Content-Type: text/html; charset=utf-8  //可选的  服务器许可请求中可有Cookie,一起发给服务器。
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100  
Connection: Keep-Alive
Content-Type: text/plain

2、 浏览器的正常请求和回应

一旦服务器通过了"预检"请求,以后每次浏览器正常的CORS请求,就都跟简单请求一样,会有一个Origin头信息字段。服务器的回应,也都会有一个Access-Control-Allow-Origin头信息字段。
下面是正常的cors的http请求头部信息

PUT /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
X-Custom-Header: value
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

下面是服务器的正常响应

Access-Control-Allow-Origin: http://api.bob.com
Content-Type: text/html; charset=utf-8

cors和JSONP的比较

JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/280200.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【原理图操作】原理图更新PCB时未改动元器件布局变动问题?

转载PCB布局、布线完工之后,由于设计功能,发现不完善时, 原理图部分功能需要改动,再改原理图,修改完成后,导入PCB过程中,发现PCB中未改动(部分)的元器件 布局发生了变化,…

关闭edge任务栏预览_如何在Microsoft Edge中关闭选项卡预览

关闭edge任务栏预览Now that it has extension support, Microsoft Edge is becoming a more and more viable browser. One feature people seem to either love or hate is the pop-up preview you get when you hover over a tab. There’s no built-in setting that lets y…

智能手机丢失 数据安全_丢失智能手机时该怎么办

智能手机丢失 数据安全Phones get stolen or lost everyday. With a plethora of data ripe for identity-theft on it, a lost phone can easily make your blood run cold. Take a deep breath, How-To Geek will talk you through this. 手机每天都会被盗或丢失。 随着大量用…

程序员怎样成为一名架构师?

在今天的技术圈,可能随便遇到一个人递给你一张名片,title 就是某某架构师。架构师多如过江之鲫,也正是眼下业内一个有趣的现象。对于架构师,你有什么看法?什么是架构师?随便打开某招聘网站:系统…

共享没有权限访问权限_如何与家人共享SmartThings访问权限

共享没有权限访问权限If you have multiple people in your household and want them all to have access to SmartThings from their phones, here’s how to share access to SmartThings with anyone you want. 如果您的家庭中有多个人,并且希望他们所有人都可以…

使用jquery+css实现瀑布流布局

虽然可以直接使用css实现瀑布流布局,但显示的方式有点问题,所以这儿就直接使用jquerycss来实现瀑布流布局,最终效果如下: 思路是通过将每个小块的position设置为relative,然后计算出在当前选择的列下应该上移的距离&am…

geek_How-To Geek正在寻找安全作家

geekThink you have the perfect combination of geek knowledge and writing skills? We’re looking for an experienced, security-focused writer to join our team. 认为您将怪胎知识和写作技能完美结合了吗? 我们正在寻找经验丰富,注重安全性的作…

AAC 文件解析及解码流程

OUTLINE: * AAC概述 * AAC规格简述 * AAC特点 * AAC音频文件解析 ——ADIF&ADTS格式 ——ADIF&ADTS头信息 ——ADIF&ADTS数据信息 ——AAC文件处理流程 * AAC解码流程…

IntelliJ IDEA代码分屏显示

转载于:https://www.cnblogs.com/EasonJim/p/9124809.html

vscode重置应用程序_如何在Windows 10上重置应用程序的数据

vscode重置应用程序With Windows 10’s Anniversary Update, you can now reset an app’s data without actually uninstalling and reinstalling the app. This can fix problems when an app has gotten into a bad state, or just quickly restore an app to its default s…

程序报错与提示

2019独角兽企业重金招聘Python工程师标准>>> 我们在开发中, 为了程序的规范性,把报错级别,调的比较高NOTICE级别的也报出来,有助于我们快速定位错误和代码规范,但是,在产品上线后,网站运营过程中,就不宜报这么多错. 1:这种错误给客户的印象不好 2:在报错…

dock怎么自定义_如何自定义和调整Mac的Dock

dock怎么自定义The macOS dock normally appears at the bottom of your screen, but it doesn’t have to. The dock is customizable in quite a few ways you might not be aware of, especially if you’re a new Mac user. macOS坞站通常显示在屏幕底部,但不是…

ios 轻扫手势_轻扫即可快速删除iOS计算器中的数字

ios 轻扫手势iOS’ built-in calculator is a basic, simple-to-use calculator that’s very handy for doing some quick calculations, such as calculating the tip on your restaurant bill. It’s also useful for longer, more complicated calculations. However, ther…

游戏安全资讯精选 2017年第十期 英国彩票网遭遇DDoS攻击,中断90分钟 DNSMASQ多高危漏洞公告 阿里云协助警方破获国内最大黑客攻击案,攻击峰值690G...

【本周游戏行业DDoS攻击态势】 国庆期间,针对游戏行业的DDoS攻击放缓,攻击者也在放“小长假”,10月8日超过500G的攻击可视作攻击猛烈度恢复的表现。 【游戏安全动态】 英国彩票网遭遇DDoS攻击,中断90分钟 点击查看原文 点评&#…

02 jmeter 简单发送http请求

一、新建http请求模板1、测试计划2、右键Threads(users)-线程组3、右键sample-http请求4、右键监听器-查看结果树5、右键监听器-查看聚合报告二、编辑http请求内容三、设置并发用户1:虚拟用户数; 2:加载用户时间;3、每个用户循环次…

java调用siri 语言_如何更改Siri的声音,口音,性别和语言

java调用siri 语言Most of us are familiar with Siri as an American female voice. What you may not realize is that you can actually change Siri to have a different accent, gender, and language. 我们大多数人都熟悉Siri,这是一种美国女性声音。 您可能没…

mac word 设置语言_如何更改Mac的语言和区域设置

mac word 设置语言If you want to use your Mac in a different language, or you’re live in a different region, then you can change it in OS X. When you do, it’ll display everything in your preferred language, currency, date format, and more. 如果您想以其他语…

飞利浦dicom_如何按计划打开或关闭飞利浦色相灯

飞利浦dicomThe Philips Hue app can do a handful of cool stuff with your Hue lights, including the ability to schedule your lights to turn on and off at specific times throughout the day. Here’s how to set it up so that you never have to flip a switch ever…

Mono生命周期小实验

今天在写代码的时候,遇到一个初始化顺序问题,于是做了一个实验,下面记录结果: 情景: 1.在 脚本A中实例化 一个预制体,该预制体挂有脚本B 2.在 脚本A中,获取实例化物体 身上的 脚本B,…

[读书笔记]大型分布式网站架构设计与实践.分布式缓存

前言:本书是对分布式系统架构涉及到的相关技术的一本科普书籍。由于很难作为开发参考,只能但求了解。所以通篇浅读,对分布式系统进行大致的了解。因为写的非常好,感觉非常有意思,自己也做不出总结。所谓的读书笔记也就…