CODEWITHSUNDEEP
javascriptamazon-web-servicesamazon-s3aws-api-gateway
Parth Manaktala
Parth Manaktala

Reputation: 1168

XMLHttpRequest to API GATEWAY not working

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.

Upvotes: 1

Views: 1435

Answers (1)

Parth Manaktala
Parth Manaktala

Reputation: 1168

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.

Upvotes: 1

Related Questions