React，API 平台 - 请求的资源上不存在 'Access-Control-Allow-Origin' header

Question

我在 VPS 上托管了我的网站， 只有一个域名 。我有一个使用 API 平台构建的 API 构建和一个使用 React 构建的前端构建。我设置了 2 个虚拟主机，一个用于我的 API，另一个用于我的前面：

API :

<VirtualHost *:80>
        ServerName my-api.project.fr
        ServerAlias www.my-api.project.fr

        DocumentRoot path/to/my/api-project/public
        DirectoryIndex /index.php

        <Directory path/to/my/api-project/public>
                AllowOverride None
                Order Allow,Deny
                Allow from All

                FallbackResource /index.php
        </Directory>
</VirtualHost>

正面：

<VirtualHost *:80>
        ServerName my-front.project.fr
        ServerAlias www.my-front.project.fr

        DocumentRoot path/to/my/front-project/build

        DirectoryIndex index.html

        <Directory "path/to/my/front-project/build">
                Options +FollowSymLinks
                AllowOverride all
                Require all granted

                FallbackResource /index.html
        </Directory>
</VirtualHost>

在每个请求之前，我通过 API 调用验证我的前端，其中 returns 我放入本地存储的令牌。 url 是：http://my-api.fr/api/guest/client/generate-public-token 我对这个电话没问题，它工作得很好。

但是，我有一个注册端点 (http://my-api.fr/api/guest/account/register) 不起作用，浏览器 returns : Access to XMLHttpRequest at 'http://my-api.project.fr/api/guest/account/register' from origin 'http://my-front.project.fr' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 我真的不明白为什么这个调用不起作用' t 工作但不是另一个...

在我的 API 中，我有 Nelmio Bundle，我的配置是：

nelmio_cors:
    defaults:
        origin_regex: true
        allow_origin: ['%env(CORS_ALLOW_ORIGIN)%']
        allow_methods: ['GET', 'OPTIONS', 'POST', 'PUT', 'PATCH', 'DELETE']
        allow_headers: ['Content-Type', 'Authorization', 'Origin']
        expose_headers: ['Link']
        max_age: 3600
    paths:
        '^/': ~

变量CORS_ALLOW_ORIGIN等于^https?://my-front.project.fr(:[0-9]+)?$，但还是不行。

我不知道它是否可以帮助某人，但 headers 我的请求是：

POST /api/guest/account/register HTTP/1.1
Host: my-api.project.fr
Connection: keep-alive
Content-Length: 120
Accept: application/json, text/plain, */*
Authorization: Bearer my_token
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36
Content-Type: application/json;charset=UTF-8
Origin: http://my-front.project.fr
Referer: http://my-front.project.fr/register
Accept-Encoding: gzip, deflate
Accept-Language: fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7

提前致谢。

Answer 1

我的 API Vhost 配置错误... 我必须将 AllowOverride None 更改为 AllowOverride All 因为我有一个 .htaccess 文件

Answer 2

听起来你需要 cors https://enable-cors.org/server_php.html。如果您无权配置 Apache，您仍然可以从 PHP 脚本发送 header。这是将以下内容添加到您的 PHP 脚本的情况：

 <?php
 header("Access-Control-Allow-Origin: *");

React，API 平台 - 请求的资源上不存在 'Access-Control-Allow-Origin' header

React, API Platform - No 'Access-Control-Allow-Origin' header is present on the requested resource

php

reactjs

api-platform.com