TL;DR

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

中间服务器设置

当跨域请求被重定向时,中间服务器返回的 CORS 相关的响应头应当与最终服务器保持一致。 任何一级的 CORS 失败都会导致 CORS 失败。这些头字段包括Access-Control-Allow-OriginAccess-Control-Allow-Credentials等。

响应 preflight 的头字段包括Access-Control-Allow-HeadersAccess-Control-Allow-Methods等。 因为 preflight 不允许重定向(见下文),所以中间服务器也就不必管这些 preflight 头字段。

如果中间服务器未设置Access-Control-Allow-Origin,在 Chrome 中的错误信息为:

XMLHttpRequest cannot load http://mid.com:4001/redirect.

Redirect from 'http://mid.com:4001/redirect' to 'http://index.com/access-control-allow-origin-wildcard'

has been blocked by CORS policy:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

Origin 'http://index.com:4001' is therefore not allowed access.

如果最终服务器未设置Access-Control-Allow-Origin,在 Chrome 中的错误信息为:

XMLHttpRequest cannot load http://index.com:4001/access-control-allow-origin-not-set.

No 'Access-Control-Allow-Origin' header is present on the requested resource.

Origin 'null' is therefore not allowed access.

Origin 变成 null 的解释见下文。

重定向preflight 请求

任何非 2xx 状态码都认为 preflight 失败, 所以 preflight 不允许重定向。各浏览器表现一致不再赘述,可参考 W3C:

The following request rules are to be observed while making the preflight request:

If the end user cancels the request Apply the abort steps.

If the response has an HTTP status code that is not in the 2xx range Apply the network error steps.

– W3C CORS Recommandation: Cross-Origin Request with Preflight

重定向简单请求

对于简单请求浏览器会跳过 preflight 直接发送真正的请求。 该请求被重定向后浏览器会直接访问被重定向后的地址,也可以跟随多次重定向。 但重定向后请求头字段origin会被设为"null"(被认为是 privacy-sensitive context)。 这意味着响应头中的Access-Control-Allow-Origin需要是*null(该字段不允许多个值)。

即使浏览器给简单请求设置了非简单头字段(如DNT)时,也应当继续跟随重定向且不校验响应头的DNT (因为它属于User Agent Header,浏览器应当对此知情)。 参考 W3C 对简单请求的处理要求:

If the manual redirect flag is unset and the response has an HTTP status code of 301, 302, 303, 307, or 308 Apply the redirect steps. – W3C CORS Recommendation

OSX 下 Chrome 的行为是标准的,即使设置了DNT也会直接跟随重定向。

Safari 的怪异行为

Safari 在设置DNT字段后,会向重定向后的地址首先发起 preflight(可能是它忘记了该头部是自己设置的?)。 这一行为在桌面 Safari 的隐身模式,以及 iOS 很多浏览器中都可以观察到。 Safari 远程调试 iPhone,遇此行为调试器会崩掉(笔者试了3个 Mac+iPhone Pair)。

建议使用tcpdump或者写一个简单的 CORS 服务器来调试。 在 OPTIONS 请求中,会带有Access-Control-Request-Headers来声明需要发送dnt。

Access-Control-Request-Headers: 'dnt, accept-language, origin'

这意味着为了 Safari 系列的浏览器(包括 iOS 平台的多数浏览器), 重定向简单 CORS 请求仍然需要实现 OPTIONS 方法(虽然我们发的只是是简单请求)。 并且在Access-Control-Allow-Headers响应头字段添加dnt声明。 否则 Safari 会认为 CORS 失败:

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

Request header field DNT is not allowed by Access-Control-Allow-Headers.

为了轻松地让 CORS preflight 成功,测试环境中可以简单地将请求头Access-Control-Request-Headers的内容直接设置到响应头Access-Control-Allow-Headers

重定向非简单请求

非简单请求是 preflight 成功后才发送实际的请求。 preflight 后的实际请求不允许重定向,否则会导致 CORS 跨域失败

虽然在 Chrome 开发版中会对重定向后的地址再次发起 preflight,但该行为并不标准。 W3C Recommendation中提到真正的请求返回301, 302, 303, 307, 308都会判定为错误:

This is the actual request. Apply the make a request steps and observe the request rules below while making the request. If the response has an HTTP status code of 301, 302, 303, 307, or 308 Apply the cache and network error steps. – W3C CORS Recommendation

在 Chrome 中错误信息是Request requires preflight, which is disallowed to follow cross-origin redirect:

XMLHttpRequest cannot load http://mid.com:4001/cross-origin-redirect-with-preflight.

Redirect from 'http://mid.com:4001/cross-origin-redirect-with-preflight' to 'http://dest.com:4001/access-control-allow-origin-wildcard'

has been blocked by CORS policy: Request requires preflight,

which is disallowed to follow cross-origin redirect.

在 Safari 中的错误信息是Cross-origin redirection denied by Cross-Origin Resource Sharing policy.:

XMLHttpRequest cannot load http://mid.com:4001/redirect.

Cross-origin redirection denied by Cross-Origin Resource Sharing policy.

多次重定向的讨论

多次重定向涉及的一个关键问题是:preflight 后的请求不允许重定向。因此:

  • 对于简单请求并且没有任何 preflight 的情况:浏览器会一直跟随重定向(当然 HTTP 另有规定的除外,如 POST 被 302 时),直到最后一个请求返回或者中间请求的 CORS 验证失败(比如Access-Control-Allow-Origin设置错误)。
  • 对于简单请求但是浏览器会发起 preflight 的情况(比如 Safari 对 DNT 的处理):因 preflight 后重定向真正的请求会导致 CORS 失败,所以多次重定向是不可行的。
  • 对于非简单请求:浏览器会直接发起 preflight,后续的重定向都是不允许的因此多次重定向不可行。

总之,如果需要兼容大多数浏览器,不论是否为简单请求都不可以多次重定向。

重定向 CORS 跨域请求的更多相关文章

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

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

  2. Spring Boot Web应用开发 CORS 跨域请求支持:

    Spring Boot Web应用开发 CORS 跨域请求支持: 一.Web开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS等等CORS与JSONP相比 1. JSONP只能实现 ...

  3. 4 伪ajax:jsonp、cors 跨域请求

    一.同源策略 https://www.cnblogs.com/yuanchenqi/articles/7638956.html 同源策略(Same origin policy)是一种约定,它是浏览器最 ...

  4. CORS跨域请求总结

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

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

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

  6. SpringBoot配置Cors跨域请求

    一.同源策略简介 同源策略[same origin policy]是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 什么是源 源[or ...

  7. Java实现CORS跨域请求

    问题 使用前后端分离模式开发项目时,往往会遇到这样一个问题 -- 无法跨域获取服务端数据 这是由于浏览器的同源策略导致的,目的是为了安全.在前后端分离开发模式备受青睐的今天,前端和后台项目往往会在不同 ...

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

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

  9. CORS跨域请求

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

随机推荐

  1. Spring 中的 JDBCTemplate

    新建一个java工程 写好spring配置文件,直接上代码 <?xml version="1.0" encoding="UTF-8"?> <b ...

  2. 使用pandas,numpy进行数据分析建模的一些常用命令

    1.读取文件为pandas格式: import pandas as pd import numpy as np dataset = pd.read_csv("C:/Users/Adminis ...

  3. Logback 标准xml参考

    强制: [强制]应用中不可直接使用日志系统(Log4j.Logback)中的 API,而应依赖使用日志框架SLF4J 中的 API,使用门面模式的日志框架,有利于维护和各个类的日志处理方式统一.imp ...

  4. JQuery之选择器篇(一)

      今天回顾了之前学习的JQuery选择器,现在简单的总结一下. JQuery选择器类型   主要分为四类 基本选择器 层级选择器 过滤选择器 表单选择器 基本选择器   基本选择器是jQuery中最 ...

  5. ThinkPHP判断更新是否成功的正确方法

    如何判断一个更新操作是否成功 $Model = D('Blog'); $data['id'] = 10; $data['name'] = 'update name'; $result = $Model ...

  6. Python——5函数

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...

  7. VM安装Linux Centos7.0虚拟机

    一.准备工作 1.安装VMware 官网https://www.vmware.com/cn.html 2.准备centos7的镜像文件 官网下载链接:http://isoredirect.centos ...

  8. Angular 从入坑到挖坑 - 表单控件概览

    一.Overview angular 入坑记录的笔记第三篇,介绍 angular 中表单控件的相关概念,了解如何在 angular 中创建一个表单,以及如何针对表单控件进行数据校验. 对应官方文档地址 ...

  9. js中如何判断属性是对象实例中的属性还是原型中的属性

    ECMAScript5中的hasOwnProperty()方法,用于判断只在属性存在与对象实例中的时候,返回true,in操作符只要通过对象能访问到属性就返回true. 因此只要in操作符返回true ...

  10. JUC常用同步工具类——CountDownLatch,CyclicBarrier,Semaphore

    在 JUC 下包含了一些常用的同步工具类,今天就来详细介绍一下,CountDownLatch,CyclicBarrier,Semaphore 的使用方法以及它们之间的区别. 一.CountDownLa ...