我们知道借助Access-Control-Allow-Origin响应头字段可以允许跨域 AJAX, 对于非简单请求,CORS 机制跨域会首先进行 preflight(一个 OPTIONS 请求), 该请求成功后才会发送真正的请求。 这一设计旨在确保服务器对 CORS 标准知情,以保护不支持 CORS 的旧服务器。

简单请求

简单请求具体是指请求方法是简单方法且请求头是简单头的 HTTP 请求。具体地,

简单方法包括GET, HEAD, POST

简单头包括:Accept, Accept-LanguageContent-Language,以及值为application/x-www-form-urlencoded, multipart/form-data, text/plain 其中之一的 Content-Type 头。

对于非简单请求浏览器会首先发送 OPTIONS 请求(成为 preflight), 例如添加一个自定义头部x-foo的 HTTP 请求:

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.setRequestHeader('x-foo', 'bar');
xhr.send();

服务器需要成功响应(2xx)并在Access-Control-Alow-Headers中包含x-foo (因为它不是简单头部):

OPTIONS /origin-redirect-with-preflight 200
Access-Control-Allow-Headers: x-foo
Access-Control-Allow-Origin: http://index.com:4001
Connection:keep-alive
Content-Length: 0
Access-Control-Request-Headers

Access-Control-Request-Headerspreflight 请求中用来标识真正请求将会包含哪些头部字段, preflight 请求本身不会发送这些头字段。 例如上述请求中Access-Control-Request-Headers字段的值应该是x-foo。 服务器应当在对应的Access-Control-Allow-Headers响应头中包含这些字段。 否则即使返回 200 preflight 也会失败:

XMLHttpRequest cannot load http://mid.com:4001/access-control-allow-origin-wildcard.

Request header field x-foo is not allowed by Access-Control-Allow-Headers in preflight response.

关于 DNT 请求头

有些浏览器(如 Safari 隐身模式)会在请求中添加DNT头, 但浏览器不会(也不应)因此而发起 preflight。 因为这一请求头是浏览器添加的,也应当对此知情。 所以响应头中也不需要包含Access-Control-Allow-Headers, 参照 W3C Recommendation,满足以下条件即可跳过 preflight:

For request method there either is a method cache match or it is a simple method and the force preflight flag is unset. For every header of author request headers there either is a header cache match for the field name or it is a simple header.

注意只要所有Author Header是简单头即可跳过,这里的DNT虽然不是简单头但它属于 User-Agent Header。 注意在 CORS 被重定向之后这一状况会变得复杂,在重定向 CORS 跨域请求一文有较详细的讨论。

CORS 跨域中的 preflight 请求的更多相关文章

  1. CORS跨域带来的preflight request

    CORS跨域带来的preflight request https://blog.csdn.net/baidu_35407267/article/details/79043515 HTTPS://blo ...

  2. CORS跨域限制以及预请求验证

    之前我们可以通过“Access-Control-Allow-Origin”,实现跨域请求,那是不是所有跨域请求都可以通过设置Access-Control-Allow-Origin实现跨域请求呢?显然不 ...

  3. ajax跨域通过 Cors跨域资源共享 进行GetPost请求

    using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Ne ...

  4. JSONP跨域和CORS跨域

    什么是跨域? 跨域:指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器的安全限制! 同源策略 同源策略:域名.协议.端口均相同. 浏览器执行JavaScript脚本时,会检查这 ...

  5. CORS跨域请求规则以及在Spring中的实现

    CORS: 通常情况下浏览器禁止AJAX从外部获取资源,因此就衍生了CORS这一标准体系,来实现跨域请求. CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origi ...

  6. CORS——跨域请求那些事儿

    在日常的项目开发时会不可避免的需要进行跨域操作,而在实际进行跨域请求时,经常会遇到类似 No 'Access-Control-Allow-Origin' header is present on th ...

  7. CORS跨域请求

    一.问题: 服务器端代码 from flask import Flask from flask import make_response from flask import jsonify app = ...

  8. [转] 重定向 CORS 跨域请求

    非简单请求不可重定向,包括第一个preflight请求和第二个真正的请求都不行. 简单请求可以重定向任意多次,但如需兼容多数浏览器,只可进行一次重定向. 中间服务器应当同样配置相关 CORS 响应头. ...

  9. CORS跨域请求总结

    CORS跨域请求分为简单请求和复杂请求. 1. 简单请求: 满足一下两个条件的请求. (1) 请求方法是以下三种方法之一: HEAD GET POST (2)HTTP的头信息不超出以下几种字段: Ac ...

随机推荐

  1. docker实践-安装wordpress

    很多人都有搭建wordpress的经历,可能被某些环境的配置搞得焦头乱耳的,这里使用docker,可以很轻松的进行wordpress的搭建工作. 安装 Docker sudo apt-get inst ...

  2. Luogu_1966_火柴排队

    题目描述 涵涵有两盒火柴,每盒装有\(n\)根火柴,每根火柴都有一个高度. 现在将每盒中的火柴各自排成一列, 同一列火柴的高度互不相同, 两列火柴之间的距离定义为:$ \sum (a_i-b_i)^2 ...

  3. RHEL系统下安装atlassian-jira-5

    操作系统:RHEL 6.4 x86_64 Jira版本:atlassian-jira-5.2.11-x64.bin 安装路径:/opt/atlassian/jira/ 数据保存路径:/opt/atla ...

  4. 如何在NLP领域第一次做成一件事

    作者简介 周明,微软亚洲研究院首席研究员.ACL候任主席(president).中国计算机学会中文信息技术专委会主任.中国中文信息学会常务理事.哈工大.天津大学.南开大学.山东大学等多所学校博士导师. ...

  5. [ASP.NET Core 3框架揭秘] 服务承载系统[1]: 承载长时间运行的服务[上篇]

    借助.NET Core提供的承载(Hosting)系统,我们可以将任意一个或者多个长时间运行(Long-Running)的服务寄宿或者承载于托管进程中.ASP.NET Core应用仅仅是该承载系统的一 ...

  6. list转map,set,使用stream进行转化

    #list转map,set,使用stream进行转化 函数式编程: 场景: 从数据库中取出来的数据,经常是list集合类型,但是list转map这种场景虽然不常见,但是有时候也会遇到,最常见的还是转为 ...

  7. 利用matplotlib进行数据可视化

    matplotlib是python中的一个画图库,继承了matlib(从名字上也看得出来)的优点和语法,所以对于熟悉matlib的用户来说是十分友好的. pylab和pyplot 关于pylab和py ...

  8. android通过NFC开启/关闭NTAG213的密码保护功能

    穷遍全网没有资料,最后找到了官方的寄存器文档和StackOverflow上找到了解决方案 首先要用 MifareUltralight 来进行操作,在onNewIntent处先校验返回的tag是否包含了 ...

  9. 玩转 React(五)- 组件的内部状态和生命周期

    文章标题总算是可以正常一点了-- 通过之前的文章我们已经知道:在 React 体系中所谓的 "在 JavaScript 中编写 HTML 代码" 指的是 React 扩展了 Jav ...

  10. LeetCode 81.Search in Rotated Sorted Array II(M)

    题目: Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. ( ...