No ‘Access-Control-Allow-Origin’ header is present on the requested resource

Question

I'm working on an API Rest with Symfony and React as a frontend "framework".

When trying to connect to an URL with Postman for a GET request such as http://example.com/api/headers it works perfectly. But when I try to connect with React App http://localhost:3000, I receive this error message: "localhost/:1 Access to XMLHttpRequest at ’http://example.com/api/headers' from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.".

I specify that I'm using MongoDB ODM instead of ORM.

So it seems that everything should be managed with NelmioCorsBundle (https://github.com/nelmio/NelmioCorsBundle).

I've installed the Bundle, done all the things I had to do according to the documentation. I tried different configurations in config/nelmio_cors.yaml I found on forums. I've also found this Github issue (https://github.com/nelmio/NelmioCorsBundle/issues/68) explaining that the problem could be solved by clearing cache. So I tried php bin/console clear:cache (on both dev + prod environments) but it hasn't changed anything.

This is my current nelmio_cors.yaml file:

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

And this is my .env file:

CORS_ALLOW_ORIGIN=^https?://localhost(:[0-9]+)?$

I can see that I can't modify request headers but only response headers and according to the error message, I should be able to add ‘Access-Control-Allow-Origin’ in request headers and I don't know how.

Thanks a lot!

Answer 1

Another way that is to add Access-Control-Allow-Origin when PHP is running before any HTTP response is sent. To do this, just add header("Access-Control-Allow-Origin: localhost:3000"); (allow only localhost:3000) or header("Access-Control-Allow-Origin: *"); (allow all) at the beginning of you code.

More information: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

Answer 2

check this thread made by myself where i ran into a similar issue !

Symfony 4.1 - CORS issue

I've answered the question myself and i think it should help you. Lemme give some informations:

1. Remove NelmioCorsBundle.
2. Add CORS support directly via Apashe ! (this is where i can't help you since i used nginx)
3. Enjoy CORS support ;)

EDIT: Found this https://enable-cors.org/server_apache.html it might help you and it seems rather simple

Hope it helps