如何解决:对预检请求的响应未通过访问控制检查:没有“访问控制允许来源”标题[重复]

Question

我正在尝试用php后端和React JS前端构建一个简单的API。为此，我使用了两个单独的docker容器（api.dev.de和react.dev.de，因为这是一个要求。我使用的是一个稍微经过调整的nginx代理版本。然而，当我将每个react fetch（）的请求发送到服务器时，我得到了错误：

CORS策略已阻止从源https：//react.dev.de获取https：//api.dev.de/index.php?read=users的访问：对预检请求的响应未通过改造权限检查：请求的资源上不存在“Access-Control-Allo-Origin”标头。如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用CORS的情况下获取资源。

下面您可以看到我正在尝试提出的请求和. htAccess文件。

我已经查找了一些适用于其他人的解决方案，包括我也写入Dockerfile的这个解决方案（并首先在我的docker-compose.yml中启用此映像的扩展名）。

此外，我仔细阅读了这个答案，并浏览了其他文章的链接，以积累一些知识，但仍然没有成功。。。

这是我的代码片段。

人.js：

...

fetch('https://api.dev.de/index.php?read=users', {
      method: 'POST',
      headers: {
        'Authorization': 'Basic ' + btoa("<secretName>:<secretPass>"),
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      }
    })

...

. htAccess：

Authtype Basic
AuthName "Protected section. Only for developers."
AuthUserFile /var/www/html/App/.htpasswd
Require valid-user

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Credentials "true"

Dockerfile中的配置：

FROM thecodingmachine/php:7.3-v2-apache

...

RUN a2enmod headers

...

执行该函数时，我获取了这些控制台日志：

CORS 策略已阻止从源“https:// react.dev.de”获取“https:// api.dev.de/index.php?read=users”的访问：对预检请求的响应未通过访问控制检查：请求的资源上不存在“访问控制-允许源”标头。如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”，以便在禁用 CORS 的情况下获取资源。

VM2133：1 发布 https://api.dev.de/index.php?read=users 网：：ERR_FAILED

但是，当我删除.htaccess文件中的所有身份验证配置以及从Persons中删除Authorization和Content-Type部分时。js文件，我得到一个有效的响应。但我不能仅仅从页面中排除我的授权。

当我构建React应用程序并将其粘贴到与API相同的docker容器中，然后调用它时，一切都正常。所以我假设它是docker容器的配置（如果我错了，请纠正我）。

从昨天开始，我尝试了不同的方法，并提出了最后一个问题。

我的fetch()函数现在看起来如下:

fetch('https://api.dev.de/index.php?read=users&pass=<password>', {
      method: 'GET',
      headers: {
        'Content-Type': 'multipart/form-data',
        'Accept': 'application/json'
      },
    })

我也改变了我的。htaccess文件:

# Enabled in the Dockerfile but still checking if it is enabled.
<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Content-Type "*"
    Header set Access-Control-Accept "*"
    # This should enable the authentication header
    Header set Access-Control-Allow-Credentials "true"
</IfModule>

现在请求起作用了，但是当我更改读取（）函数以发送授权标头时（'授权'：'基本：'btoa（'

Authtype Basic
AuthName "Protected section. Only for developers."
AuthUserFile /var/www/html/App/.htpasswd
Require valid-user

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Content-Type "*"
    Header set Access-Control-Accept "*"
    # This should enable the authentication header
    Header set Access-Control-Allow-Credentials "true"
</IfModule>

我仍然得到错误：

访问在 'https://api.dev.de/index.php?read=users 处获取

< s >这是因为我的订单。htaccess还是我需要修改别的东西？

在我的研究中，我找到了一个类似问题的答案：“飞行前请求（OPTIONS），这是我遇到401未经授权的地方。我想这是因为我读过OPTIONS去掉了一些标头，包括身份验证标头，所以没有它，它无法进行身份验证”。

来源： https://github.com/axios/axios/issues/2076

检查 developer.mozilla.org 指南 （https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Sending_a_request_with_credentials_included） 我想始终发送凭据（以使预检请求成功）。

然而，这不起作用。。。

有人知道为什么没有吗？

更新的get ch（）函数：

fetch('https://api.dev.de/index.php?read=users&pass=<password>', {
      method: 'POST',
      credentials: 'include',
      headers: {
        'Authorization': 'Basic: ' + btoa('<secretName>:<secretPass>'),
        'Content-Type': 'multipart/form-data',
        'Accept': 'application/json'
      },
    })

我仍然得到同样的错误：

访问在 'https://api.dev.de/index.php?read=users 处获取




Answer 1

匿名用户

预检请求与Docker无关，它们是与浏览器相关的策略。您正在使用触发预检机制的HTTP标头，在您的情况下是“授权”标头，并从您网站的域到api.dev.de域进行跨域调用。

您可以阅读这篇关于避免预检的文章。

我倾向于在api服务器中添加一个endpoint，用适当的CORS相关头(例如< code > Access-Control-Allow-Origin )来响应所有< code>OPTIONS请求