Background
I am currently building a web service using Serverless and AWS for the backend and Axios for calling the backend resources from a ReactJS frontend. Since the backend and frontend components are published under different domains, I need to use Cross-Origin-Resource-Sharing (CORS) to circumvent the Same-Origin-Policy that most browsers enforce by now.
The problem
Unfortunately, even though I have configured all of the Access-Control headers on the backend side (in AWS Api Gateway), I still get the error
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://example.com/internal/role. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
The data
Now, the issue I have is that when calling the OPTIONS call (not as a preflight but as a "standalone" call) on one of my resources with Postman, I receive the correct Access-Control headers. However, when issuing that same request with Axios, I do not seem to receive those headers which makes me think it might be an issue with Axios.
These are the Postman headers I receive when making the OPTIONS call:
- Date: Fri, 26 Jun 2020 12:01:18 GMT
- Content-Type: application/json
- Content-Length: 0
- Connection: keep-alive
- x-amzn-RequestId: <some ID>
- Access-Control-Allow-Origin: https://example-gui.com
- Access-Control-Allow-Headers: Origin,Accept,Content-Type,X-Amz-Date,Authorization,X-Api-Key,x-requested-with
- x-amz-apigw-id: <some ID>
- Cache-Control: max-age=600, s-maxage=600, proxy-revalidate
- Access-Control-Allow-Methods: OPTIONS,POST
- Access-Control-Allow-Credentials: true
And these are the headers Axios tells me it receives when making the OPTIONS call:
- cache-control: max-age=600, s-maxage=600, proxy-revalidate
- content-length: 0
- content-type: application/json
However, when using Firefox's dev tools, I can see that all headers are actually returned as seen in the Postman list. I don't know whether Axios just hides these fields or does not process them for some reason.
Unfortunately, I have no information about data returned by the actual POST call since it just throws the mentioned exception.
The Code
The Postman call is just a basic call to the respective URL with the OPTIONS method that only has one additional header (Authorization) so I'm not going to go into that any further.
The Axios call originates from the URL https://example-gui.com/#/ and is made like this:
const fullResponse = (response: AxiosResponse) => response;
const backendRequests = {
...
options: (url: string, header: {}) =>
axios.options(url, header).then(fullResponse),
...
};
const loginRequests = {
getUserRole: (accesstoken: string) =>
backendRequests.options(
"https://example.com/internal/role",
{ Authorization: `Bearer ${accesstoken}` }
),
};
And then I print the result like this:
try {
await agent.loginRequests
.getUserRole(this.accessToken)
.then((response) => {
console.log(response); // <-- Printing the results
<...>
});
} catch (error) {
console.log(error);
}
Which is where I got the list within the "The data" segment from.
The questions
Is it possible that this is a bug within the Axios framework, is it a configuration based issue where the Axios call has to be set up differently beforehand to receive all of the headers or does the problem lie somewhere else?
How can I manage to get through the Same-Origin-Policy with all of this information in mind?
