Cloud-API: CORS Error

[MichZipp]

Hello,

I have a mobile hub web project and I enabled the cloud api to access my database. When i call the api with: API.get("sampleCloudApi","/items").then(response => { console.log("test"); }).catch(error => { console.log(error) }); I'm getting the following CORS Error: "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://1by9inkzr2.execute-api.eu-central-1.amazonaws.com/Development/articles. (Reason: CORS request did not succeed)."

But when i test the API with the awsmobile-cli with: awsmobile cloud-api invoke sampleCloudApi GET "/items" It works!

The whole project is configured via the awsmobile-cli on a linux machine.

What could be the reason?

[elorzafe]

Can you paste your mobile-hub-project.yml ?

[elorzafe]

Which version of amplify are you using?

[MichZipp]

@elorzafe I use Amplify Version 1.0.8!

My mobile-hub-project.yml:

--- !com.amazonaws.mobilehub.v0.Project 
features:
  cloudlogic: !com.amazonaws.mobilehub.v0.CloudLogic 
    components:
      articlesCRUD: !com.amazonaws.mobilehub.v0.API 
        attributes:
          name: articlesCRUD
          requires-signin: false
          sdk-generation-stage-name: Development
        paths:
          /articles: !com.amazonaws.mobilehub.v0.Function 
            codeFilename: uploads/articles-20180828115452.zip
            description: 'Handler for calls to resource path : /articles/{proxy+}'
            enableCORS: true
            environment: {}
            handler: lambda.handler
            hashcode: **********
            memorySize: '128'
            modified: '2018-08-28T18:56:01.906+0000'
            name: articles
            runtime: nodejs6.10
            timeout: '3'
            version: bgK2_LbrTr.iCA5kCMcu.aTneEPdq91.
          '/articles/{proxy+}': !com.amazonaws.mobilehub.v0.Function 
            codeFilename: uploads/articles-20180828115452.zip
            description: 'Handler for calls to resource path : /articles/{proxy+}'
            enableCORS: true
            environment: {}
            handler: lambda.handler
            hashcode: **********
            memorySize: '128'
            modified: '2018-08-28T18:56:01.906+0000'
            name: articles
            runtime: nodejs6.10
            timeout: '3'
            version: ikTTvWsbBtCKS.euuv8rxKjt_fubx3Bt
      sampleCloudApi: !com.amazonaws.mobilehub.v0.API 
        attributes:
          name: sampleCloudApi
          requires-signin: false
          sdk-generation-stage-name: Development
        paths:
          /items: !com.amazonaws.mobilehub.v0.Function 
            codeFilename: uploads/sampleLambda-20180828121427.zip
            description: 'Handler for calls to resource path : /items/{proxy+}'
            enableCORS: true
            environment: {}
            handler: lambda.handler
            hashcode: **********
            memorySize: '128'
            modified: '2018-08-28T19:15:32.354+0000'
            name: sampleLambda
            runtime: nodejs6.10
            timeout: '3'
            version: YL2QMDWWVmkqcbRu3HO6UzbSsBk01TfZ
          '/items/{proxy+}': !com.amazonaws.mobilehub.v0.Function 
            codeFilename: uploads/sampleLambda-20180828121427.zip
            description: 'Handler for calls to resource path : /items/{proxy+}'
            enableCORS: true
            environment: {}
            handler: lambda.handler
            hashcode: **********
            memorySize: '128'
            modified: '2018-08-28T19:15:32.354+0000'
            name: sampleLambda
            runtime: nodejs6.10
            timeout: '3'
            version: BulY6xQolGv5IcE7lcSOY4.0lpL0L1DR
  content-delivery: !com.amazonaws.mobilehub.v0.ContentDelivery 
    attributes:
      enabled: true
      visibility: public-global
    components:
      release: !com.amazonaws.mobilehub.v0.Bucket {}
  database: !com.amazonaws.mobilehub.v0.Database 
    components:
      database-nosql: !com.amazonaws.mobilehub.v0.NoSQLDatabase 
        tables:
          - !com.amazonaws.mobilehub.v0.NoSQLTable 
            attributes:
              email: S
              personId: S
              personName: S
              phone: S
              teamId: S
            hashKeyName: teamId
            hashKeyType: S
            indexes:
              - !com.amazonaws.mobilehub.v0.NoSQLIndex 
                hashKeyName: teamId
                hashKeyType: S
                indexName: personName-index
                rangeKeyName: personName
                rangeKeyType: S
            rangeKeyName: personId
            rangeKeyType: S
            tableName: ___DYNAMIC_PREFIX___-AWSMobileTable
            tablePrivacy: public
          - !com.amazonaws.mobilehub.v0.NoSQLTable 
            attributes:
              active: BOOL
              article_id: S
              description: S
              name: S
              pictures: SS
              plz: N
              price: N
              status: S
              street: S
              user_id: S
            hashKeyName: article_id
            hashKeyType: S
            rangeKeyName: user_id
            rangeKeyType: S
            tableName: ___DYNAMIC_PREFIX___-articles
            tablePrivacy: public
  mobile-analytics: !com.amazonaws.mobilehub.v0.Pinpoint 
    components:
      analytics: !com.amazonaws.mobilehub.v0.PinpointAnalytics {}
  sign-in: !com.amazonaws.mobilehub.v0.SignIn 
    attributes:
      enabled: true
      optional-sign-in: true
    components:
      sign-in-facebook: !com.amazonaws.mobilehub.v0.StandardIdentityProvider 
        attributes:
          provider-id: '**********'
          provider-name: facebook
      sign-in-google: !com.amazonaws.mobilehub.v0.OpenIDConnectIdentityProvider 
        attributes:
          open-id-connect-audience-android: **********-lcfuum0v20n1asogb24vhrdktm5k34pi.apps.googleusercontent.com
          open-id-connect-audience-ios: **********-lcfuum0v20n1asogb24vhrdktm5k34pi.apps.googleusercontent.com
          open-id-connect-audience-webapp: **********-lcfuum0v20n1asogb24vhrdktm5k34pi.apps.googleusercontent.com
          open-id-provider-url: 'https://accounts.google.com'
      sign-in-user-pools: !com.amazonaws.mobilehub.v0.UserPoolsIdentityProvider 
        attributes:
          alias-attributes:
            - email
            - phone_number
          mfa-configuration: ON
          name: userpool
          password-policy: !com.amazonaws.mobilehub.ConvertibleMap 
            min-length: '8'
            require-lower-case: true
            require-numbers: true
            require-symbols: true
            require-upper-case: true
name: ushare
region: eu-central-1

When I check the browser network traffic, I can see that the OPTIONS method works and the GET not. For the OPTIONS Method the CORS header is set, but for the GET not!

[elorzafe]

@MichZipp one thing I noticed is that your error is pointing to articlesCRUD api and it should be using sampleCloudApi. can you paste the whole url on the network request tab?

[DumbledoreD]

Hi, I'm having a similar issue. I don't think it's a CORS problem. The reason being if I invoke my function in API Gateway through "Method Test", then API.get()....works. If left idle for about 40 minutes or so, the CORS error msg reappears. It seems the cold start and maximum execution time (timeout) are the culprits?

[MichZipp]

@elorzafe Sorry for the confusion! articlesCRUD was just an other APi which I created to test, but with no luck. Here is the url on the network request for the sampleCloudApi:

https://y92urz6isf.execute-api.eu-central-1.amazonaws.com/Development/items

@DumbledoreD Happy to here that some have a similar issue. Trying around with this error for over 2 weeks now and I have no idea how to fix it. Let me know if you have a hint how to fix this!

[danielhep]

I'm having a similar issue here. I created a cloud API from a dynamodb database and it works when I invoke it manually but it's not working at all on the website due to a CORS error.

[DumbledoreD]

@danielhep If you're using Serverless as I do. Make sure you have cors: true under your http request settings in your serverless.yml. Also include Access-Control-Allow-Origin: "*" in your response header. If your function takes some time to execute, which is what's causing my problem, go to the Lambda Management Console and change the Timeout under Basic settings to a longer period. You can find how much time your function usually takes from the CloudWatch.

[danielhep]

@DumbledoreD I'm not using Serverless for this specific API though. I generated it automatically using the AWS Mobile CLI. That's why I'm so surprised that it's not working.

[jordanranz]

@danielhep, Did you use the AWS Mobile CLI or Amplify CLI?

[jordanranz]

I am going to close this issue due to inactivity. Please open a new issue in the amplify-cli if you have any related questions or concerns.

[github-actions[bot]]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.