jquery - 为什么我的 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 中我收到错误。请求 header :

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

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

这里出了什么问题？

在 insomnia 中执行相同的请求工作得很好。

Answer 1

Response is 401 "Authorization required", it says request method is OPTIONS (?).

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

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

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

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests一般性地解释了为什么浏览器会发出 CORS 预检 OPTIONS 请求，但在问题的具体情况下，原因是该请求包含 Authorization 请求 header 。

所以发生的事情是:

1. 您的代码告诉浏览器它想要发送带有 Authorization header 的请求。
2. 您的浏览器显示，好的，带有 Authorization header 的请求要求我执行 CORS 预检OPTIONS，以确保服务器允许带有 Authorization< 的请求 header 。
3. 您的浏览器向服务器发送 OPTIONS 请求，不带 Authorization header ，因为 OPTIONS 的全部目的code> 检查是为了查看是否可以包含该 header 。
4. 您的服务器看到 OPTIONS 请求，但没有以表明允许请求中的 Authorization header 的方式响应该请求，而是使用 401 拒绝该请求，因为它缺少标题。
5. 您的浏览器预计 CORS 预检会收到 200 或 204 响应，但实际收到的是 401 响应。因此，您的浏览器会立即停止，并且永远不会尝试来自您的代码的 GET 请求。

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

修复此问题后，问题中显示的现有 cors.config 应该会导致服务器以正确的方式响应 OPTIONS 请求 - 使用 Access-Control-Allow-Headers 响应 header 包含 Authorization，以便您的浏览器可以说，好的，此服务器允许包含 Authorization header ，因此我现在将继续发送实际的 GET 请求。