Can not authenticate with JS Fetch but can with Curl

0

Setup: CloudFront -> S3 Website calling API HTTP Proxy Gateway with Cognito Authorizer -> NLB -> EC2 Nodejs servers

Looks Like the Browser CORS preflight is not authenticating but don't know why.

 Cors API setup
 Type: AWS::ApiGatewayV2::Api
   Properties:
     CorsConfiguration:
       AllowMethods:
         - "GET"
         - "OPTIONS"
       AllowOrigins:
         - "https://api.example.com"
         - "https://www.example.com"
     ProtocolType: HTTP
    
 S3 CORS
[
   {
       "AllowedHeaders": [
           "*"
       ],
       "AllowedMethods": [
           "GET",
           "PUT",
           "POST",
           "DELETE",
           "HEAD"
       ],
       "AllowedOrigins": [
           "https://api.example.com", 
           "https://www.example.com"
       ],
       "ExposeHeaders": []
   }
]  

fetch(authHost , {
           method: 'POST',  
           body: 'grant_type=authorization_code&code=' + authCode + '&client_id=' + clientId + '&redirect_uri=' + RedirectUrl ,
           headers: {
               'Content-Type': 'application/x-www-form-urlencoded'
           }
           }).then(function (resp) {
               return resp.json();
           }).then(function (data) { 
               token = data.access_token;
               tokenType = data.token_type;
               expires = new Date().getTime() + (data.expires_in * 1000);
               console.log(token);
               return fetch(apiUrl, {
                 method: 'GET',
                 headers: {
                     'Authorization': data.token_type + ' ' + data.access_token ,
                     'Content-Type': 'application/x-www-form-urlencoded'
                 }   
               })
           }).then(function (resp) {
               return resp.json();
           }).then(function (data) {
               console.log('Api', data);
           }).catch(function (err) {
               console.log('something went wrong 123', err);
           });

Shows in Cloudwatch like this
   "requestId": "LRAc2jUoCYcEJOQ=",
   "ip": "98.225.200.225",
   "requestTime": "14/Sep/2023:21:27:20 +0000",
   "httpMethod": "OPTIONS",
   "routeKey": "ANY /{proxy+}",
   "status": "401",
   "protocol": "HTTP/1.1",
   "responseLength": "26"
}


curl -i -H "Origin: https://www.example.com"  -H "Authorization: Bearer <$TOKEN same used in fetch> "  api.example.com
HTTP/2 200 
date: Thu, 14 Sep 2023 21:29:04 GMT
content-type: text/html; charset=utf-8
content-length: 30
x-powered-by: Express
etag: W/"1e-iY27tYNBcCiBeGFYhCtCYNgyObk"
apigw-requestid: LRAtCiVFCYcEJFg=
access-control-allow-origin: https://www.example.com
vary: origin

Shows in Cloudwatch like this
{
   "requestId": "LRAqIjcnCYcEMpw=",
   "ip": "98.225.200.225",
   "requestTime": "14/Sep/2023:21:28:45 +0000",
   "httpMethod": "GET",
   "routeKey": "ANY /{proxy+}",
   "status": "200",
   "protocol": "HTTP/1.1",
   "responseLength": "30"
}

1 Answer
0

Looking at the CORS API setup you have the following:

CorsConfiguration: AllowMethods: - "GET" - "OPTIONS"

The JS Fetch request is made with the POST method and In the CORS configuration, POST is not specified in the AllowedMethods element. regarding the Curl request CORS is not checked on CURL as CORS is a browser feature.

AWS
answered 8 months ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions