404 error/No Access-Control-Allow-Origin header message in Symfony 4 + React app. How to make the routing work? - reactjs

Question

I have created simple application and would like to deploy it on a server. I am going through this for the first time – so no previous experiences I could benefit from.
The problem in general:
The app has implemented React Router, but uses Symfony routing for calls to and from database. So for navigating through app tabs, React Router takes place, for fetching in/from DB I intended to use Symfony routes.
Everything works well when I am on the local server. But when I manually dragged and dropped files on the server the app breaks on the fetch requests.
React component code:
let targetUrl = `http://serverAddress.nazwa.pl/save`;
let request = new Request(targetUrl, {
body: formData,
method: "POST",
headers: {
"Access-Control-Request-Method": "POST, GET, OPTIONS",
"Origin": "http://mySimpleAppDomain.com.pl",
}
})
fetch(request)
.then((response) => response.json())
.then((response) => {
this.setState({
isListActive: false,
currentItems: [],
currentItemsCounter: 0
})
document.getElementById("defNavEl").classList.add("default")
})
.catch((error) => {
console.error('SAVE TO DB FETCH ERROR:', error);
});
Symfony Controller code:
**
* #Route("/save", name="save")
*/
public function save(Request $request)
{
$shoppingList = new ShoppingList();
$list = $request->request->all();
if (count($list) > 0) {
$em = $this->getDoctrine()->getManager();
$shoppingList->setCreationDate(new \DateTime());
$shoppingList->setName($list['name']);
unset($list['name']);
$shoppingList->setListItems($list);
$em->persist($shoppingList);
$em->flush();
$results = $em->getRepository(ShoppingList::class)->listAllShoppingLists();
$response = $this->json($results);
$response->headers->set('Access-Control-Allow-Origin', 'https://localhost:8006');
$response->headers->set('Content-Type', 'application/json');
return $response;
} else {
return new Response();
}
}
Nelmio CORS bundle configuration:
nelmio_cors:
defaults:
allow_credentials: false
allow_origin: []
allow_headers: []
allow_methods: []
expose_headers: []
max_age: 0
hosts: []
origin_regex: false
forced_allow_origin_value: ~
paths:
'^/': null
origin_regex: false
allow_origin: ['*']
allow_methods: ['*']
allow_headers: ['*']
expose_headers: ['Link']
max_age: 3600
Observations:
When I try to fetch data to DB I receive the following message in the console:
Access to fetch at 'http://example.nazwa.pl/save' from origin 'http://myappname.com.pl' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
This happens despite the fact that I have set ‘Access-Control-Allow-Origin' header in the action that is intended to handle the request.
When I send some test requests on the http://serverAddress.nazwa.pl/save via Postman, I get 404 error.
That seems to be at odds with the CORS policy message cited in he point 1).
What I tried (among others):
I tried to reorganize controller so that there is only one action responsible for different requests. But mysteriously it didn't work. It also doesn't seem to be good idea in terms of good practices.
Calling for help:
I am out of ideas for now. Perhaps it is something with .htaccess configuration (I have installed Apache Pack, which has generated it). I will appreciate any suggestions or ideas that could help me move forward.

Answer 1

Your Configuration is pointing to null at this line :
'^/': null
You need to have configuration related to your route and domain like this:
Feel free to change it to your needs and use .env config if it's symfony 4:
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']
expose_headers: ['Link']
max_age: 3600
paths:
'^/save' :
allow_origin:
- '^http://serverAddress.nazwa.pl/'
- '^http://localhost:[0-9]+'
- '^http://serverAddress.nazwa.pl/save'
#allow_origin: ['*']
allow_credentials: true
allow_headers: ['Authorization', 'X-Requested-With', 'content-type','Content-Type', 'Accept', 'Origin', 'X-Custom-Auth']
allow_methods: ['POST', 'PUT', 'GET', 'DELETE','PATCH','OPTIONS']
max_age: 3600
'^/': null
The Paths array will take route and apply default configuration from above and then merge it with route specific configuration so you get exact config for each routes defined.
This example defaults all other routes to block cors requests except /save route which will allow domains or paths defined in array.
Note that : allow_origin: ['*'] will allow from all other domains to request resource which is not recommended unless it is a public api and any script can request to it.