skip to Main Content

I am getting CORS error when making ajax request to the AWS lambda function url from browser.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://somethingsomething.lambda-url.us-east-2.on.aws/authnz/subscribe. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

My Lambda Function URL’ CORS is configured as below . However, browser is still throwing error when my JQUERY makes POST call.
enter image description here

JQuery call:

$.ajax({
      url: remoteUrl,
      type: "POST",
      contentType: "application/json",
      headers: {
        "Authorization": "Bearer "+token
      },
      data:  {"a":"aa"},
      success: function(response) {
         
        console.log(response);
      },
      error: function(xhr) {
        
        $("#form_save_message").show();
      }
    });
  });

The response headers for the OPTIONS calls are
enter image description here

How can I get the CORS working for the POST to the Lambda function URL? I am not using API gateway just the Lambda function URL. Do I must use API Gateway ? From what I have seen every question here is with API gateway + Lambda.

My Backend code, just have some business logic and looks like this :

public class RegistrationApplication implements RequestHandler<Map<String, Object>, Map<String, Object>> {
     

    @Override
    public Map<String, Object> handleRequest(Map<String, Object> requestParams, Context context) {
        Map<String,Object> lambdaResponse = new HashMap<>();
        return lambdaResponse;
    }
}

Note,

  1. my lambda is written in Java
  2. I am not seeing the lambda handler logs rolling when OPTIONS calls is made by browser so adding headers in the function
    public Map<String, Object> handleRequest(Map<String, Object> requestParams, Context context) { will have no effect.

2

Answers


  1. Chosen as BEST ANSWER

    After quite some online reading, debugging and taking help from other comments I figured out that my jQuery was sending content-type and authorization headers.

    So there are two ways to fix this:

    1. In the original question, I already allowed the "authorization" headers but the jQuery was sending content-type headers because of this line contentType: "application/json". So I updated the jquery to dataType: "json",. 2.You add both the headers in the "Allow headers" of the Function URL.

    This article explains how to debug CORS: https://medium.com/@mail.ekansh/cors-with-lambdas-function-url-22bb5bfcb3c4


  2. For me, CORB issue happened when I had configured the API Gateway with proper CORS configurations, but my Lambda function written in .NET was not returning proper CORS header in the response. This was resulting in successful OPTIONS request but was failing while making GET or POST requests to the API Gateway.

    A simple solution for you would be to return Access-Control-Allow-Origin header from your Java Lambda function.

    I am not a JAVA guy, so please excuse me if I am wrong below. But this is just to show you how can you return the required header from the Lambda function.

    public Response handleRequest(RequestClass request, Context context){
        .
        .
        .
        Map<String, String> headers = new HashMap<>();
        headers.put(Access-Control-Allow-Origin, "*"); // Required CORS header
    
        return new Response(200, headers, responseBody);
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search