Enabling CORS on console causes sync issue with awsmobile pull

[jbarwick]

I have an API defined in mobile-hub-project.yml such as this:

commentsCRUD: !com.amazonaws.mobilehub.v0.API attributes: name: commentsCRUD requires-signin: true sdk-generation-stage-name: Development
paths: /comments: !com.amazonaws.mobilehub.v0.Function codeFilename: uploads/comments-20180706221653.zip description: 'Handler for calls to resource path : /comments/{proxy+}' enableCORS: true environment: {} handler: lambda.handler

CORS is said to be enabled.

The Mobile Hub Console indicates CORS as "disabled" (the checkbox is clear, which I would assume means the console feels the CORS is disable).

When clicking the checkbox to enable CORS on the console, and after the stack is updated, and I do an awsmobile pull, the handler: is set to "handler: index.handler", there is a brand new file called index.js inserted into the source code with a generic template, and the enableCORS:true is removed from the yml file.

Then, the frontend responds with a "failed preflight check" and "network error" from Amplify API.

The only way to fix this was to delete the entire API stack from cloudformation, disable and re-enable the cloud-api from awsmbile-cli and restart all API from scratch.

Has anyone ever had this same experience?

[ChadElias]

@jbarwick Did you manage to fix this and get CORS working with your MH project?

[jbarwick]

I don’t think so. I didn’t do anything specific. I am ignoring the console. If it works, I’m leaving it alone. And it seems to be working. Whatever the setting. I will check and post later

[tlpierce]

I'm having the same issue. Although in trying to disable / enable cloud-api, my app is now in a bad state. When I do an awsmobile push, CloudFormation is rolling back every single time. The CREATE_FAILED status reason is that the embedded stack wasn't created - one of the resources failed to create. I'm going to back all the way up and try again.

[tlpierce]

Quick update - disabled cloud-api, made sure to delete all artifacts from Lambda console, CloudFormation, etc. Pulled. Re-enabled. Pushed. Now I'm back in business and CORS is working by default. Not sure what happened, but happy to be back on track!

[swaminator]

@tlpierce: Sorry to hear about your issue with the 'cloud-api' feature. AWS Mobile Hub does not delete your Lambda functions when you disable the cloud-api feature via the CLI/console. This is why you were unable to redeploy the stack when you made changes. As you realized, once you deleted the Lambdas, you were back in business. Let me know if you have any other issues.

[swaminator]

@jbarwick: Really sorry to hear about your issue and thanks for suggesting a workaround. While we investigate this issue, the workaround for now is to enable CORS via the CLI and not modify it via the console.

[Jeyloh]

I've been struggling with this issue since monday, really taking up my time at work. I've gathered some questions if you could be of help @swaminator 💯

awsmobile --version >>> 1.1.5

First off, my issues:

• I'm using Cognito in React Native with custom_header: async () => { return {Authorization: (await Auth.currentSession()).idToken.jwtToken}} which is supposed to append an Authorization token.
• I've made it work all the way to my application but I were just testing out some things and now I can't make it work again. When it worked, it only made calls after Cognito login. The state of API Gateway at that time was Authorization: None and API Key: Not required. This also doesn't make sense to me, because Auth is actually required. => Now I'm getting 403 error, which I bypassed yesterday my making sure Authorization: None
• I push from my local project with my mobile-hub-project.yml being set up correctly (requires-signin: false, enableCORS: true). This updates the API Gateway with Authorization: AWS_IAM and API Key: Not required, and it also adds a Mock Endpoint for CORS. Perfect.
• In AWS Mobilehub my settings are set to "Protected" and CORS unchecked. This is out of sync.
• Also, updating API Gateway directly completely crashes my MobileHub Cloud-API and the CloudFormation template. I did it once and had to delete it in console and push from local to fix it.

Some questions then

1. Instead of updating from console, can I update CORS in the mobile-hub-project.yml OR even the CLI? It doesn't seem the CLI have this option but updating .yml file actually creates the Mock Endpoint in API Gateway.
2. Is the custom_header being used in my situation? Gateway says it isn't required but I have to Sign In to make it work.
3. In MobileHub, what is the Private, Protected, Public actually doing? It edits Gateways Authorization property. It would be great with a Header in MobileHub with a little explanation, as "Paths" have. My issue here is that there's 3 options, but I can only set my .yml file requires-signin to true/false. In my specific case where I already have MobileHub and Cognito setup, I'd think the API calls would work with all 3 options (Cognito for Private and MobileHub for Protected). However, I get 403 unless it's Public and I can't update to Public in MobileHub console without deleting my Lambda and removing Mock Endpoint CORS in Gateway.

Feature request: Replace requires-signin with "authorization": "private/public/protected".

I hope this wasn't too much text, but I've been struggling for ~20-30 hours with this. I love the MobileHub product, but might start looking into the new amplify-cli as I'd like to avoid unsynced consoles!

Thanks anyways, hope this helps debugging from your side. Cheers!

[jameslporter]

I can confirm at least that when I setup a cloud api and choose cors in the console it does not work. I've been beating my head on this for too long. How does anyone build things with this being so difficult?

[jameslporter]

Failed to load https://ootbx5nkea.execute-api.us-west-2.amazonaws.com/Development/items: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

I tried deleting all artifacts as well and then with the yml option set for cors pushed. The push was nominal however I am still not getting CORS enabled endpoints.

I don't understand how anything built on top this would not depend on CORS, you would have to have something on the same domain/subdomain if I understand correctly and I can't think of a single use case where this would be useful without CORS.

[jameslporter]

Is it possible for you all to report this issue of the console not setting up CORS to the appropriate AWS team? I'm relatively new to aws mobile hub and related tooling but this has been a pretty bad DX. Cognito with aws-amplify-react was so smooth it sucked me into adopting aws mobile as well.

For what it's worth the CORS setting does not work even if you create a new API in the console and do not use awsmobile-cli at all. IMHO that's a showstopper and should be addressed as such.

[elorzafe]

@jamesporter, sometimes the issue is not CORS (even if the error said so), when you look on the network requests you should see 2 HTTP request: one for OPTIONS method and the second for the method you are trying to call. Do you have OPTIONS request with a server error?

[SoccerBoyMalloy]

For what it's worth the CORS setting does not work even if you create a new API in the console and do not use awsmobile-cli at all. IMHO that's a showstopper and should be addressed as such.

1. Choose resource in API gateway -> Actions -> Enable CORS
2. Accept default values and submit
3. Creation expectedly (?) fails because the new OPTIONS method does not define a Method Response for status code 200
4. Choose new OPTIONS method -> Method Response -> Add response -> specify value "200"
5. Repeat steps 1 and 2, which now succeed
6. Now if you go to Mobile Hub -> Cloud Logic -> Test API -> Options -> Test, you should get an empty response with the correct headers.
7. Don't forget to update your relevant lambda functions to specify the header: Access-Control-Allow-Origin=*

All of that said, I can't seem to get this to be properly automated by Mobile Hub. If this was a one-and-done process, then I could forget about it. However, it is unacceptable since all of this is undone whenever I run awsmobile publish from the CLI. Are there any hidden steps for enabling CORS from Mobile Hub? I don't know how much of the following is relevant, but these are all of my settings as reflected in Mobile Hub:

• Require User Sign-In: No
• My API is public
• All paths show that the Enable CORS checkbox is checked

Based on @Jeyloh 's response, it looks like I may be able to update my .yml file, but I'd prefer to avoid that as I've already run into some hairy issues by manually updating files.