Thanks very much for your reply jayair. I just found the issue and as usual it was user error, i had an extra whitespace in my config.js for cognito IDENTITY_POOL_ID value. Removing it fixed my issue.
D’OH!
1 Like
Hi, thanks for your help.
I had the same warning message, and already check my “Identity Pool” setting and is unchecked, I don’t had an extra whitespace in my config.js
I can’t login with a wrong password so I’m logging in correctly, I mean, I think my credentials are good.
I try to post to another URL:
createNote(note) { return API.post("notes", "/nontes", { body: note }); }
but it keeps bringing the same warning message.
What can I do?
Thank you in advance.
(English is not my native language, sorry about that)
Nevermind, my
Amplify.configure
was not correct, I missed to write the line
identityPoolId: config.cognito.IDENTITY_POOL_ID,
Reviewing the lecture “Configure AWS Amplify” help me.
Sorry to bother you.
1 Like
No worries. Thanks for following up.
Hi,
I am getting a ‘network error’ alert and 403 error in the console. I’m not quite sure how to proceed. Ah, little help?
Failed to load https://jupiterz3d.execute-api.us-west-2.amazonaws.com/prod/sceneTitles: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 403.
Also, I am getting INSUFFICIENT_DATA alarms in CloudWatch. They are stating that 15 data points were unkonwn.
When are you seeing this error?
When I click the create button and trigger the API call.
I should add that I am nesting notes in my project so I have one ‘get’ call to pull in the parent note’s id and then the create call saving the data to another table. Do you think that may be causing the CORS error?
Hmm are you making two API calls from your the frontend in that case?
Yeah. The get call from the componentDidMount function and the post call after the user inputs their data and triggers the create API. The ‘Access-Control-Allow-Origin’ header for both is the same. They are both importing the ./libs/response-lib.js file for this.
To simplify debugging this, can you follow this chapter https://serverless-stack.com/chapters/test-the-apis.html to test the two APIs you are trying to call? Just to make sure they are working okay.
Yeah they are working okay. I followed all the great advice that you gave to people also dealing with 403 errors before me.
I’m starting to think that I need to just pass the data in from the previous state instead of calling the get api again. I tried that first but it through some errors and I couldn’t find documentation as clear as yours so I tried it this way.
I think the way I have it set up the browser is assuming it’s a cross-site scripting attack or something.
Hmm a lot of times you get these CORS errors if there is some other kind of error. I would also try to check the API Gateway and Lambda logs to see if there is anything going on.
1 Like
I’ve been troubleshooting this issue off and on now for two days. The error message I was getting was the following:
No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000’ is therefore not allowed access. The response had HTTP status code 403.
I’ve tried just about every single solution posted here but nothing worked. Then when looking at the post from @jayair regarding unauthenticated identities, I remembered the Authenticated and Unauthenticated IAM Roles I created a while ago for this Cognito identity pool. Low and behold, I added a FullAdmin policy to the authenticated role and it worked. So, after looking at both my aws-amplify config, Mobile Hub, Cognito, API Gateway configs, the serverless.yml file, and many sls deploys of the app on each of my many trial-and-error changes, it came down to IAM role permissions. Now to remove that FullAdmin role and follow PoLP access controls. Hope this helps someone out, this drove me crazy!
1 Like
Yeah debugging is sadly still a very frustrating experience. Glad you figured it out.
If you are getting: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000’ is therefore not allowed access. The response had HTTP status code 403.**
Then add this to your handler.js
headers: {
"Access-Control-Allow-Origin" : "*", // Required for CORS support to work
"Access-Control-Allow-Credentials" : true // Required for cookies, authorization headers with HTTPS
},
credit to this answer -> https://stackoverflow.com/a/43029002
You will have to do a serverless remove and then serverless deploy to get the change to take effect.
Hope this helps someone. Cheers.
1 Like
Appreciate the tip. Thanks!
I was also running into the “No ‘Access-Control-Allow-Origin’ header is present…” issue and walked through all of the above guidance - didn’t have any issues. Then I realized that I wasn’t actually logged in to the app 
which may be something other folks run into if you have your local node server running and are refreshing the /notes/new page. Once I logged in, it worked great.
3 Likes
I’m still getting CORS error. I’ve added the headers to the handler.js and I’ve tested the API according to the Test the APIs chapter. Also gone through all the common issues listed and checked that the IAM role works using the IAM Policy Simulator. So the problem must be with the React app right?
I noticed that my handle.js function header looks like this
export const hello = async (event, context, callback) => {
And others looks like this
module.exports.hello = function(event, context, callback) {
Does that mean anything?
Hmmm I think that should be fine. Can you show me a screenshot of the error you are seeing?
If the test we do in the test the API chapter works, then there’s no potential problem with the API that might cause CORS issues right?