Home » Php » php – React, API Platform – No 'Access-Control-Allow-Origin' header is present on the requested resource

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

Posted by: admin February 25, 2020 Leave a comment

Questions:

I hosted my website on a VPS with only one domain name.
I’ve an API build with API Platform and a front build with React.
I set up 2 vhosts one for my API and one for my front like that :

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>

FRONT :

<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>

Before each request I authenticate my front via an API call which returns a token which I put in the local storage. The url is: http://my-api.fr/api/guest/client/generate-public-token
I have no problem with this call, it works perfectly.

However, I’ve a registration endpoint (http://my-api.fr/api/guest/account/register) which doesn’t work and the browser 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. I really don’t understand why this call doesn’t work but not the other one…

In my API, I’ve Nelmio Bundle and my config is :

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:
        '^/': ~

Variable CORS_ALLOW_ORIGIN is equal to ^https?://my-front.project.fr(:[0-9]+)?$ but it still doesn’t work.

I don’t know if it can help someone but headers of my request are :

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

Thanks in advance.

How to&Answers:

Bad config on my API Vhost…
I’ve to change AllowOverride None by AllowOverride All beacuse I’ve an .htaccess file

Answer:

sounds like you need cors https://enable-cors.org/server_php.html. If you don’t have access to configure Apache, you can still send the header from a PHP script. It’s a case of adding the following to your PHP scripts:

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