为什么我的 Drupal 8 CORS 设置不起作用？

Question

从 Drupal 8.2 开始，cors 设置在核心中。在我的services.yml（和default.services.yml）中，我有以下设置：

cors.config:
    enabled: true
    # Specify allowed headers, like 'x-allowed-header'.
    allowedHeaders: ['x-csrf-token','authorization','content-type','accept','origin','x-requested-with']
    # Specify allowed request methods, specify ['*'] to allow all possible ones.
    allowedMethods: ['*']
    # Configure requests allowed from specific origins.
    allowedOrigins: ['*']
    # Sets the Access-Control-Expose-Headers header.
    exposedHeaders: false
    # Sets the Access-Control-Max-Age header.
    maxAge: 1000
    # Sets the Access-Control-Allow-Credentials header.
    supportsCredentials: true

我的域 a.com 受 htaccess 密码保护。

在域 b.com 上，我尝试从域 a.com 加载一些 API：

$.ajaxSetup({
  xhrField: {
    withCredentials : true
  },
  beforeSend: function (xhr) {
    xhr.setRequestHeader('Authorization', 'Basic Z2VuaXVzOmNvYXRpbmdz');
  }
});

request = $.ajax({
  url: apiBaseUrl + 'api/foobar',
  dataType: 'json',
  type: 'get',
  password: 'foo',
  username: 'bar'
});

在 chrome 中它工作正常，在 Firefox 中我得到一个错误。请求头：

Access-Control-Request-Method: GET
Access-Control-Request-Headers: authorization

响应是 401“需要授权”，它说请求方法是 OPTIONS (?)。

这里有什么问题？

在insomnia 中执行相同的请求效果很好。

Answer 1

响应是 401“需要授权”，它说请求方法是 OPTIONS (?)。

您需要将服务器后端配置为不需要对OPTIONS 请求进行授权。

该 401 响应表明服务器要求对 OPTIONS 请求进行授权，但授权失败，因为该请求不包含所需的凭据。

原因是，OPTIONS 请求是作为 CORS 的一部分由您的浏览器自动发送的。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests 一般解释了为什么浏览器会进行 CORS 预检 OPTIONS 请求，但在问题的特定情况下，原因是因为请求包含 Authorization 请求标头。

所以发生的事情是：

1. 您的代码告诉您的浏览器它想要发送带有 Authorization 标头的请求。
2. 您的浏览器显示，好的，带有 Authorization 标头的请求要求我执行 CORS 预检 OPTIONS 以确保服务器允许带有 Authorization 标头的请求。
3. 您的浏览器将OPTIONS 请求发送到服务器没有Authorization 标头，因为OPTIONS 检查的全部目的是查看是否可以包含该标头。
4. 您的服务器看到 OPTIONS 请求，但它没有以表明它允许请求中的 Authorization 标头的方式对其进行响应，而是以 401 拒绝它，因为它缺少标头。
5. 您的浏览器期望 CORS 预检得到 200 或 204 响应，但得到的是 401 响应。因此，您的浏览器会停在那里，并且永远不会尝试来自您的代码的 GET 请求。

因此，您需要弄清楚当前服务器端代码的哪一部分导致您的服务器需要对OPTIONS 请求的授权，并且您需要更改它以便它处理OPTIONS 请求而不需要授权.

一旦您解决了这个问题，问题中显示的现有 cors.config 应该会导致服务器以正确的方式响应 OPTIONS 请求 - 使用包含 Authorization 的 Access-Control-Allow-Headers 响应标头，以便您的然后浏览器可以说，好的，这个服务器允许包含Authorization 标头的跨域请求，所以我现在继续发送实际的GET 请求。

Answer 2

除了有效的 CORS 配置和 htaccess 设置：

SetEnvIfNoCase Request_Method OPTIONS noauth
Order Deny,Allow
Deny from all
Require valid-user
Allow from env=noauth
Satisfy Any

您必须确保您的 ajax 设置没有 withCredentials 和 password 和 username，就像我的问题一样。至少，这会导致 Firefox 出现错误。工作 ajax：

$.ajaxSetup({
  xhrField: {
    withCredentials : true
  },
  beforeSend: function (xhr) {
    xhr.setRequestHeader('Authorization', 'Basic foobarbarfoo');
  }
});

request = $.ajax({
  url: isApiActive ? apiBaseUrl + 'api/mydata' : './mydata.json',
  dataType: 'json',
  type: 'get'
});