React 已被 CORS 策略阻止：没有“Access-Control-Allow-Origin”标头答案

【问题标题】：React has been blocked by CORS policy: No 'Access-Control-Allow-Origin' headerReact 已被 CORS 策略阻止：没有“Access-Control-Allow-Origin”标头
【发布时间】：2021-02-01 12:18:38
【问题描述】：

根据这个答案enable cors in .htaccess 我想允许从 React 应用程序到 Laravel 应用程序的本地服务器的跨域请求。所以我在 public/.htaccess 的开头添加了这些行。但它不起作用。

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

错误提示：

访问 XMLHttpRequest 在 'http://localhost:8000/api/page/dynamic/111170/1' 来自原点 'http://localhost:3000' 已被 CORS 策略阻止：否请求中存在“Access-Control-Allow-Origin”标头资源。

谁能告诉我我做错了什么？

【问题讨论】：

或者，您可以试试这个extension 并启用它。这仅用于本地测试目的。

标签： reactjs cors laravel-5.7

【解决方案1】：

在您的服务器中，您需要启用来自本地主机的请求：3000 来源。默认情况下，大多数服务器框架会阻止不是来自其自身 ip 的请求。这称为跨源请求策略，它有助于保护您的应用程序。

您需要更改您的服务器 CORS 策略以包含 localhost:3000 - 您需要在 Google 上搜索如何针对您选择的特定服务器框架执行此操作。

重申一下，这不是你的 React 代码的问题，而是你的服务器的问题。

【讨论】：

我知道。但这应该可以在 .htaccess 中完成。它应该在页面级别而不是服务器级别上被允许。我在问题中提到过。