Why is CORS not working?

[rsweetland]

I've installed Serverless CORS, and S3 plugins.

On index.html in client/dist, I'm executing this js:

$(function() {
        $('input#submitButton').click(function() {
            $.ajax({
              type: "POST",
              crossDomain: true,
              /// url: "http://lifequotes.rsweetland.com/cors-test.php", // <----- This works
              url: "https://lqua9t0r4g.execute-api.us-east-1.amazonaws.com/dev/testPost",
              contentType: "application/json; charset=utf-8",
              dataType: 'json',
              data: $('form#test').serialize(),
              success: function(data) {
                alert('Success! See dev tools for headers');
                console.log(data);
              },
              error: function(err) {
                alert('Error! No dice. Error..see logs');
                console.log(err);
              }
            });
            return false;
        });

Submitting to the serverless endpoint (https://lqua9t0r4g.execute-api.us-east-1.amazonaws.com/dev/testPost) with postman works:

Submitting to same endpoint from this static file on S3 fails:

I've created another, alternate endpoint that just uses PHP which works fine (commented out in above source code):

The test front-end currently points to the misconfigured CORS endpoint for easy dev-tools inspection, etc: http://s3.amazonaws.com/sandbox.sls.test.cors/index.html

[pmuens]

Finally got time to look into it 😃

Everything looks fine for now. Have you tried to enable CORS globally like this: https://github.com/JustServerless/discuss/blob/master/s-project.json#L7-L10

P.S. Which Serverless version are you using?

[rsweetland]

Good idea..but no luck yet. Options endpoint returns ok. Post returns 400 with CORS error in console.

I'm running Serverless v0.5.5

[pmuens]

And you redeployed with serverless endpoint deploy --all?

[rsweetland]

Yes. Could the undefined vars be an issue?

Reillys-MacBook-Pro-2:serverless-cors-test reilly$ sls endpoint deploy --all
Serverless: WARNING: This variable is not defined: stage  
Serverless: WARNING: This variable is not defined: region  
Serverless: WARNING: This variable is not defined: stage  
Serverless: WARNING: This variable is not defined: region  
Serverless: WARNING: This variable is not defined: stage  
Serverless: WARNING: This variable is not defined: region  
Serverless: WARNING: This variable is not defined: stage  
Serverless: WARNING: This variable is not defined: region  
Serverless: WARNING: This variable is not defined: stage  
Serverless: WARNING: This variable is not defined: region  

Serverless: Deploying endpoints in "dev" to the following regions: us-east-1  
Serverless: Successfully deployed endpoints in "dev" to the following regions:  
Serverless: us-east-1 ------------------------  
Serverless:   POST - testPost - https://lqua9t0r4g.execute-api.us-east-1.amazonaws.com/dev/testPost  
Serverless:   OPTIONS - testPost - https://lqua9t0r4g.execute-api.us-east-1.amazonaws.com/dev/testPost  

I also just realized the https vs http may be a problem, but that doesn't seem like it either. Same error (although API Gateway does appear to only accept https input)

[pmuens]

The variables might not be a problem (see here).

I would recommend to open up an issue at https://github.com/joostfarla/serverless-cors-plugin/issues as @joostfarla may know more (because he's the author of the plugin and knows it's internals inside out).

[rsweetland]

Ok – I'll give that a shot. Thanks for checking it out.

On Wed, Jun 1, 2016 at 9:36 AM, Philipp Muens notifications@github.com
wrote:

The variables might not be a problem (see here
joostfarla/serverless-cors-plugin#19).

I would recommend to open up an issue at
https://github.com/joostfarla/serverless-cors-plugin/issues as @joostfarla
https://github.com/joostfarla may know more (because he's the author of
the plugin and knows it's internals inside out).

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#1 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AAE9c6Ie4t0h2Sc_4lGO5aLC8qnjty8Wks5qHbUMgaJpZM4IpZX7
.

Reilly Sweetland
Co-Founder | FollowUpThen
@rsweetland

[joostfarla]

Hi @rsweetland,

Just had a look at your test-page! The preflight (OPTIONS) endpoint is successfully deployed and it returns the correct status code and headers. It looks like API gateway returns an error (400) response on the actual POST request which does not contain the CORS headers. Could you try fixing the function so that it returns a 200 OK status? Or check your Cloudwatch logs to see why it is return a 400 error? Normally all error responses should contain the CORS headers, but it could be that your function has problems with matching content types for the request or response.

Cheers, Joost

[rsweetland]

@joostfarla Really appreciate you finding this and helping me debug!

You were right – the client JS was malformed, causing the whole thing to fail. I think API Gateway was rejecting the request before it made it to the Cloudwatch logs, making it a bit difficult to debug. With commit 99ad31f everything is working.

Thanks again!