XMLHttpRequest to API GATEWAY not working

Question

I was trying to make a call to API Gateway to display the JSON returned by it using XMLHttpRequest .My web page is hosted on AWS S3. When I tried I got the following Error-

Failed to load {url of API} : Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

The code for the Request is -

var config = {
            headers: {
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Credentials": "true",
            "Access-Control-Allow-Methods": "DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT",
            "Access-Control-Allow-Headers": "Content-Type,Authorization,X-Amz-Date,X-Api-Key,X-Amz-Security-Token"
            }
            } 

            axios.get(API_URL,config)
            .then(function (response) {
                    console.log(response);
            })

My CORS setup in amazon s3 is

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>https://s3.ap-south-1.amazonaws.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Details - Webpage Hosted on AWS S3 Sending a Request to AWS API gateway

Background -
Checked this this and this on stackoverflow but it could not help me solve the problem.

EDIT:

As stated I tried removing the config from axios call. I got a ERROR as

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s3.ap-south-1.amazonaws.com' is therefore not allowed access.

In your frontend JavaScript code, remove the entire "headers" object, or even just remove the entire "config" option from your axios.get call (since the headers object is all that config object contains) — because the Access-Control-Allow-* headers are all response headers, not request headers. The error cited in the question is what happens when you try to set any of them as request headers. — sideshowbarker
@sideshowbarker if I remove that i get this error - "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 's3.ap-south-1.amazonaws.com' is therefore not allowed access." — Parth Manaktala
@Parth, yes, but that is only because adding this misconfiguration is causing a different error to occur first. Sending Access-Control-Allow-Origin in the request is wrong. Setting it makes the original error go away but that is not because it is helping. The CORS settings on the bucket are also not relevant. Look at your API Gateway CORS configuration: docs.aws.amazon.com/apigateway/latest/developerguide/… — Michael - sqlbot

Parth Manaktala Parth Manaktala · Accepted Answer · 2019-01-16T12:40:49

This method worked for me

The code I used :-

        axios.get(API_URL)
        .then(function (response) {
                console.log(response);
        })

CDN for AXIOS -
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>

Then I had to enable the response headers in API GATEWAY which I was missing.
It can be done using steps mentioned here or on Official AWS Website as mentioned by @Michael-sqlbot in comments.

XMLHttpRequest to API GATEWAY not working

1 Answers