Ad

Getting Multiple CORS Errors While Using POST API

I am getting multiple CORS error while trying to upload an image through a POST request. I have created a POST API on AWS API Gateway which triggers a lambda function written in Node js. The API works fine with Postman as it allows CORS but it is giving multiple errors on different browsers.

Errors are as below:-

  • On Firefox

enter image description here

  • On Chrome enter image description here

Below are the request headers:-

Method request headers: {
        sec - fetch - mode = cors,
        sec - fetch - site = cross - site,
        accept - language = en - US,
        en;q = 0.9,
        hi;q = 0.8,
        access - control - allow - headers = Origin,
        X - Requested - With,
        Content - Type,
        Accept,
        Authorization,
        origin = null,
        User - Agent = Mozilla / 5.0(Windows NT 10.0; Win64; x64) AppleWebKit / 537.36(KHTML, like Gecko) Chrome / 76.0 .3809 .100 Safari / 537.36,
        X - Forwarded - Proto = https,
        Host = xxxxxxx.execute - api.us - east - 2. amazonaws.com,
        X - Forwarded - Port = 443,
        X - Amzn - Trace - Id = Root = 1 - 5 d5fd816 - 4 c1ac880ed09a50047ecda00,
        accept = * /*, access-control-allow-origin=*, X-Forwarded-For=103.97.240.210, content-type=application/json, accept-encoding=gzip, deflate, br}

Request headers on Chromeenter image description here

Below are the **response headers:-**

Endpoint response headers: {
    Date = Fri,
    23 Aug 2019 12: 12: 07 GMT,
    Content - Type = application / json,
    Content - Length = 1077,
    Connection = keep - alive,
    x - amzn - RequestId = 46 a264c2 - 44 d7 - 4026 - 9168 - f227e758f078,
    X - Amz - Function - Error = Unhandled,
    x - amzn - Remapped - Content - Length = 0,
    X - Amz - Executed - Version = $LATEST,
    X - Amzn - Trace - Id = root = 1 - 5 d5fd816 - 4 c1ac880ed09a50047ecda00;sampled = 0
}

Response headers on postmanenter image description here

Below is my code Clientside: index.html

<body>

<form method="post" enctype="application/json">

    Enter the Employee Id: <input type="text" name="empId"><br>
    Upload the Employee Photo: </h2><input type="file" name="PhotoName"> <br>
    <input type="submit" name="PhotoContent" value="Upload Photo"><br><br>
</form>
</div>

 <script src="upload.js"></script>

</body>

Clientside: upload.js

const url = 'https://xxxxxxx.execute-api.us-east-2.amazonaws.com/test/upload';
const form = document.querySelector('form');

form.addEventListener('submit', e => {
    e.preventDefault();

    const files = document.querySelector('[type=file]').files;


    const reader = new FileReader() 
    reader.onload = handleFileLoad;
    reader.readAsBinaryString(files[0]);
    for (let i = 0; i < files.length; i++) {
        let file = files[i];
        console.log(file);

    }

});

function handleFileLoad(event){ 
    console.log(event);
    let formData = new FormData();
    formData.append('data', event.target.result);
    console.log('final file ', formData.get('data'));

    let data = {
        "fileName" : 'tmp123',
        "user_avatar" : event.target.result
    };

    fetch(url, {
        method: 'POST',
        body: JSON.stringify(data),
        headers : {
            'Origin' : 'https://xxxxxxx.execute-api.us-east-2.amazonaws.com/test/upload',
            'content-type' : 'application/json',
            'Access-Control-Allow-Origin' : '*',
            'Access-Control-Allow-Headers' : 'Origin, X-Requested-With, Content-Type, Accept, Authorization',
        },
    }).then(response => {
        console.log(response);
    });
}

Serverside(lambda): index.js

const AWS = require('aws-sdk');
const { parse } = require('querystring');
var s3 = new AWS.S3();
exports.handler = (event, context, callback) => {   
    if (event.method === 'POST') {
    let body = '';
    event.on('data', chunk => {
        body += chunk.toString();
    });
    req.on('end', () => {
        console.log(
            parse(body)
        );
        res.end('ok');
    });
}
    //  var event = '{ "user_avatar": "asas" }' ;

    let encodedImage = JSON.parse(event.body).user_avatar;
    let decodedImage = Buffer.from(encodedImage, 'base64');
    //  var filePath = "avatars/" + event.queryStringParameters.username + ".jpg"
     var filePath = JSON.parse(event.body).file_name

     var params = {
       "Body": decodedImage,
       "Bucket": "test-bkt-rahul",
       "Key": filePath  
    };
    s3.upload(params, function(err, data){
       if(err) {
           callback(err, null);
       } else {
           let response = {
        "statusCode": 200,
        "headers": {
            "Access-Control-Allow-Origin": ""
        },
        "body": JSON.stringify(data),
        "isBase64Encoded": false
    };
           callback(null, response);
    }
    });

};

Any suggestions will be appreciated. Thanks in advance.

Ad

Answer

Finally, the issue is resolved.

  • I was getting a 403 response code because I was using the incorrect endpoint.
  • I was getting CORS error because exception handling was not done on my server-side code. On exception, the code was not sending CORS headers in the response.
Ad
source: stackoverflow.com
Ad