AWS Pinpoint failure due to invalid CORS header 'Access-Control-Allow-Origin' missing.

Describe the bug AWS Pinpoint failure due to invalid CORS header ‘Access-Control-Allow-Origin’ missing. I’m trying to send events with unauthenticated identities in a React v16 app.

To Reproduce Steps to reproduce the behavior: 1.Create new PinPoint project in AWS console 2. Add Analytics 3. Follow steps outline in https://console.aws.amazon.com/pinpoint/home/?region=us-east-1#/apps/<redacted>/settings/webAnalytics 4. Add window.LOG_LEVEL = 'DEBUG'; to site configured in step 3 5. See the error

Expected behavior I expect the records to appear in Pinpoint analytics.

Screenshots The event is retried resulting in numerous logs of the following:

AWSPinpointProvider - init clients with credentials 
<redacted object of credentials>
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://pinpoint.us-east-1.amazonaws.com/v1/apps/<redacted>/events/legacy. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).[Learn More]
[ERROR] 32:37.335 AWSPinpointProvider - record event failed.  NetworkingError: "Network Failure"

    handleRequest xhr.js:56 sentryWrapped index.js:3852 

Desktop (please complete the following information):

• OS: Ubuntu 18.04
• Browser: Chrome / Firefox
• Versions:

•     "@aws-amplify/analytics": "^1.2.11",
  

•     "@aws-amplify/auth": "^1.2.18",
  

Additional context Without window.LOG_LEVEL = 'DEBUG' I receive the error discussed in: https://github.com/aws-amplify/amplify-js/issues/1759 for a

Sample code

import Analytics from '@aws-amplify/analytics';
import Auth from '@aws-amplify/auth';';

const amplifyConfig = {
  Auth: {
    identityPoolId: 'COGNITO_IDENTITY_POOL_ID',
    region: 'us-east-1'
  }
}
//Initialize Amplify
Auth.configure(amplifyConfig);

const analyticsConfig = {
  AWSPinpoint: {
        // Amazon Pinpoint App Client ID
        appId: '<redacted>',
        // Amazon service region
        region: 'us-east-1',
        mandatorySignIn: false,
  }
}

Analytics.configure(analyticsConfig)

//Record an event
Analytics.record('some-event-name');

//Record a custom event
Analytics.record({
    name: 'Album',
    attributes: { genre: 'Rock', year: '1989' }
});

[christopherdiehl]

After chatting with an AWS support representative, he determined that the problem was due to the configuration created by Amplify and not part of Pinpoint. I’ll update this comment with more information when I receive an update on the specific misconfiguration.

Update:

Official response from the AWS support rep advised me to follow this starting tutorial: https://aws-amplify.github.io/docs/js/start.

Given the trouble getting started with the project, we have decided to move away from Pinpoint and thus I am unable to confirm or deny if the tutorial above resolved the problem.

[stephendmalloy]

Same issue here. The only way I was able to get this working was to edit the policy for each Groups IAM role that was created by Amplify to include:

`

     {
       "Action": [
            "mobiletargeting:PutEvents",
            "mobiletargeting:UpdateEndpoint",
            "mobiletargeting:GetUserEndpoints"
        ],
        "Resource": [
            "arn:aws:mobiletargeting:*:<INSERT_AWS_ACCOUNT_ID>:apps/<INSERT_AWS_MOBILE_ANALYTICS_ID_HERE>*"
        ],
        "Effect": "Allow"
    }

`

I just copied the Resource from the authRole created by Amplify. Again, I had to update the policy for each group in my app. Without doing this any user that logs in that is associated with a group without this policy receives the CORS policy: No ‘Access-Control-Allow-Origin’ and various 403 errors. I’m pretty new to Amplify so I have no idea if this is the right way to resolve this, but it did work. I’m not sure if this will get overwritten by Amplify the next time I push any changes. I’d love some input on that if anyone knows or if there is a better way to go about this. Hope this helps someone.