Getting CORS error when calling AWS API from Jquery

Question

Getting CORS error when calling AWS API from Jquery.

CORS has enabled in API side and I can call using react > Axios but we have to use Jquery for this application.

using this code:

 $.ajax({
      type: 'POST',
      url: "https://awsapiurlhere",
      crossDomain: true,
      async:true,
      data: {
      aaa: "444",
      bbb: "aaa",
      ccc: "ccc"
      },
      dataType: 'JSON',
      cors: true ,
      contentType:'application/json',
      headers: {
          "Access-Control-Allow-Origin":"*",
      },
      success: function(response, status, xhr) {
        if (response) {
          console.log("The username you typed has been used!", status);
        } else {
           console.log("No responce" , status);
        }
      },
      error: function(xhr, status, error) {
       console.log("Something went wrong!", status );
      }
    });

getting

Access to XMLHttpRequest at 'https://url' from origin 'https://cdpn.io' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

Access-Control-Allow-Origin is a response header. you'll have to tell apigateway to send those. — Daniel A. White

Steve Steve · Accepted Answer · 2019-09-20T20:29:04

You are sending the Access-Control-Allow-Origin as part of the request. As per the error message the request header is not allowed by the CORS policy. You do not need this header in the request as it is a response header. Removing this header from the request will resolve this issue.

Getting CORS error when calling AWS API from Jquery

1 Answers