Reactjs 如何修复：对飞行前请求的响应不'；t通过访问控制检查：否'；访问控制允许原点'；标题

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

访问“https://api.dev.de/index.php？read=users”从 源“https://react.dev.de”已被CORS策略阻止： 对飞行前请求的响应未通过访问控制检查：否 “Access Control Allow Origin”标头出现在请求的服务器上 如果不透明响应满足您的需要，请设置请求的 模式设置为“无cors”，以获取禁用cors的资源

下面您可以看到我试图提出的请求和.htaccess文件

我已经找到了一些对其他人有用的解决方案，包括 我还将其写入Dockerfile（并首先在docker compose.yml中启用此图像的扩展）

而且我挖通了 回答并浏览其他文章的链接以积累一些知识，但仍然没有成功

下面是我的代码片段

Persons.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',
      }
    })

...

Dockerfile中的配置：

FROM thecodingmachine/php:7.3-v2-apache

...

RUN a2enmod headers

...

执行该函数时，我会得到以下控制台日志：

访问“https://api.dev.de/index.php？read=users”从 源“https://react.dev.de”已被CORS策略阻止： 对飞行前请求的响应未通过访问控制检查：否 “Access Control Allow Origin”标头出现在请求的服务器上 如果不透明的响应满足您的需要，请设置 请求的模式为“无cors”，以使用cors获取资源 残疾人

VM2133:1员额 net:：ERR_失败

但是，当我删除.htaccess文件中的所有身份验证配置以及从Persons.js文件中删除

授权

和

内容类型

部分时，我会得到一个有效的响应。但我不能仅从页面中排除我的授权

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

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

My fetch（）函数现在如下所示：

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

fetch（'https://api.dev.de/index.php?read=users&pass=', {
方法：“GET”，
标题：{
“内容类型”：“多部分/表单数据”，
“接受”：“应用程序/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>

#已在Dockerfile中启用，但仍在检查是否已启用。
标题集访问控制允许原点“*”
标题集访问控制内容类型“*”
标题集访问控制接受“*”
#这将启用身份验证标头
标题集访问控制允许凭据“true”

现在请求可以工作了，但是当我将fetch（）函数更改为发送授权头（

'authorization'：'Basic:'+btoa（'：'）

）和.htaccess时：

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>

Authtype-Basic
AuthName“受保护的节。仅适用于开发人员。”
AuthUserFile/var/www/html/App/.htpasswd
需要有效用户
标题集访问控制允许原点“*”
标题集访问控制内容类型“*”
标题集访问控制接受“*”
#这将启用身份验证标头
标题集访问控制允许凭据“true”

我仍然得到错误：

CORS策略已阻止在“”从源“”获取的访问：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“访问控制允许源”标头。如果不透明响应满足您的需要，请将请求的模式设置为“无CORS”，以获取禁用CORS的资源

这是因为.htaccess的顺序还是我需要修改其他内容

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

资料来源：

查看developer.mozilla.org指南（）时，我希望始终发送凭据（以使飞行前请求成功）

然而，这不起作用

有人知道为什么没有吗

更新的fetch（）函数：

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'
      },
    })

fetch（'https://api.dev.de/index.php?read=users&pass=', {
方法：“POST”，
凭据：“包括”，
标题：{
“授权”：“基本：”+btoa（“：”），
“内容类型”：“多部分/表单数据”，
“接受”：“应用程序/json”
},
})

我仍然得到相同的错误：

CORS策略已阻止在“”从源“”获取的访问：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“访问控制允许源”标头。如果不透明响应满足您的需要，请将请求的模式设置为“无CORS”，以获取禁用CORS的资源

---

飞行前请求不是与Docker相关的问题，而是与浏览器相关的策略。您正在使用触发飞行前机制的HTTP标头，在您的情况下使用“授权”标头，并执行从网站域到

api.dev.de

域的跨源调用

你可以考虑避免飞行前

我只想向您的api服务器添加一个端点，该端点使用适当的CORS相关头响应所有

选项
请求（.e.g，
访问控制允许源站
）
飞行前请求
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'
      },
    })