我在网上找到了很多关于这个问题的讨论，例如这个伟大的接受答案，但仍然无法弄清楚出了什么问题。我做了以下工作：
- 使用
create-react-app创建了一个 React 应用程序。 - 使用
npm start启动服务器，可以在浏览器中看到我的应用程序。 - 使用
fetch联系我的本地服务器：
fetch("http://xxx.xxx.xxx.xxx/endpoint.php", {
method: "post",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({
name: credentials.username,
password: credentials.password
})
}).then(response => {
console.log("fetch competed!");
});
- 在我的 PHP 端点中，
<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding");
header("Access-Control-Allow-Methods: PUT, POST, GET, OPTIONS, DELETE");
...
- 但随后Chrome控制台调试说：
CORS 策略已阻止从源"http://xxx.xxx.xxx.xxx:3000"获取"http://localhost:3000/endpoint.php"的访问：对预检请求的响应未通过访问控制检查：请求的资源上不存在"访问控制-允许源"标头。如果不透明响应满足您的需求，请将请求的模式设置为"no-cors"，以便在禁用 CORS 的情况下获取资源。
完成一些阅读后，预检请求向服务器发送一个OPTIONS，我在 PHP 标头中允许这样做。我还尝试了package.json文件中的一些proxies，并使用npm start重新启动了服务器。
我也尝试通过https://cors-anywhere.herokuapp.com/，但仍然收到错误：
CORS 策略已阻止从源"http://xxx.xxx.xxx.xxx:3000"获取"http://xxx.xxx.xxx.xxx:3000/php/login.php"(从"https://cors-anywhere.herokuapp.com/http://xxx.xxx.xxx.xxx:3000/php/login.php"重定向(的访问：对预检请求的响应未通过访问控制检查：请求的资源上不存在"访问控制-允许源"标头。如果不透明响应满足您的需求，请将请求的模式设置为"no-cors"，以便在禁用 CORS 的情况下获取资源。
我还尝试用更简单的东西替换我的fetch：
fetch(url, {
method: "POST",
body: new URLSearchParams("email=test@example.com&password=pw")
});
但它仍然不起作用。
我不明白问题可能是什么？
对于那些面临类似问题的人，我设法通过启动一个单独的Apache服务器来解决此问题，systemctl start apache，并在Apache根目录中托管我的PHP端点，例如/var/www/html/public/.由于某种原因，create-react-app开发服务器无法正常工作，但是将我的文件托管在单独的本地服务器上工作正常。