2  

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

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

You need to configure your server backend to not require authorization for OPTIONS requests.

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

That 401 response indicates the server is requiring authorization for an OPTIONS request, but authorization is failing because the request doesn’t contain the required credentials.

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

The reason is, that OPTIONS request is sent automatically by your browser as part of CORS.

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

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests explains in general why browsers make CORS preflight OPTIONS requests, but in the specific case in the question, the reason is because the request contains the Authorization request header.

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

So what’s happening is:

所以发生的事情是:

1. Your code’s telling your browser it wants to send a request with the Authorization header.

您的代码告诉您的浏览器它希望使用Authorization标头发送请求。

2. Your browser says, OK, requests with the Authorization header require me to do a CORS preflight OPTIONS to make sure the server allows requests with the Authorization header.

您的浏览器说,好的,带有Authorization标头的请求要求我做一个CORS预检OPTIONS,以确保服务器允许带有Authorization标头的请求。

3. Your browser sends the OPTIONS request to the server without the Authorization header, because the whole purpose of the OPTIONS check is to see if it’s OK to include that header.

您的浏览器在没有Authorization标头的情况下将OPTIONS请求发送到服务器,因为OPTIONS检查的全部目的是查看是否可以包含该标头。

4. Your server sees the OPTIONS request but instead of responding to it in a way that indicates it allows the Authorization header in requests, it rejects it with a 401 since it lacks the header.

您的服务器看到OPTIONS请求,但不是以指示它允许请求中的Authorization标头的方式响应它,而是因为它缺少标头而拒绝它使用401。

5. Your browser expects a 200 or 204 response for the CORS preflight but instead gets that 401 response. So your browser stops right there and never tries the GET request from your code.

您的浏览器需要200或204的CORS预检响应,而是获得401响应。因此,您的浏览器就在那里停止,从不尝试从您的代码中获取GET请求。

So you need to figure out what part of your current server-side code is causing your server to require authorization for OPTIONS requests, and you need to change that so that it instead handles OPTIONS requests without authorization being required.

因此,您需要弄清楚当前服务器端代码的哪个部分导致您的服务器需要OPTIONS请求的授权,并且您需要更改它以便在不需要授权的情况下处理OPTIONS请求。

Once you fix that, the existing cors.config shown in the question should cause the server to respond to the OPTIONS request in the right way—with an Access-Control-Allow-Headers response header that includes Authorization, so that your browser can then say, OK, this server allows cross-origin requests that contain the Authorization header, so I’ll now go ahead and send the actual GET request.

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

1  

Additionally to the working CORS configuration and htaccess setup:

除了工作的CORS配置和htaccess设置:

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

you have to make sure that your ajax setup does not have the withCredentials and password and username, like in my question. This leads to errors in Firefox, at least. Working ajax:

你必须确保你的ajax设置没有withCredentials和密码和用户名,就像在我的问题中一样。这至少会导致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'
});