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

Question

根据这个答案， 在 .htaccess 中启用 cors我想允许从 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"

错误说：

从源 'http://localhost:3000' 访问 XMLHttpRequest at 'http://localhost:8000/api/page/dynamic/111170/1' 已被 CORS 策略阻止：No 'Access-Control-Allow-Origin ' 请求的资源上存在标头。

有人可以告诉我我做错了什么吗？

Answer 1

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

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

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