search

mavi888 / contact-form-app

13 stars 7 forks source link

CORS error when using on localhost #1

Open weisisheng opened 3 years ago

weisisheng commented 3 years ago

Reviewed the video a few times and doubled checked the lambda function code (although I don't find it in the repo). Also pinned all npm modules to the package.json found here and using react 17.x.

When I try to post my first message, I get the following errors--

Access to XMLHttpRequest at 'https://.execute-api.ap-southeast-1.amazonaws.com/dev/contact' from origin 'http://0.0.0.0:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

xhr.js:172 POST https://.execute-api.ap-southeast-1.amazonaws.com/dev/contact net::ERR_FAILED dispatchXhrRequest @ xhr.js:172 xhrAdapter @ xhr.js:11 dispatchRequest @ dispatchRequest.js:59 Promise.then (async) request @ Axios.js:53 wrap @ bind.js:9 RestClient._request @ RestClient.ts:405 (anonymous) @ RestClient.ts:214 Promise.then (async) (anonymous) @ RestClient.ts:186 step @ RestClient.ts:12 (anonymous) @ RestClient.ts:12 (anonymous) @ RestClient.ts:12 push../node_modules/@aws-amplify/api-rest/lib-esm/RestClient.js.__awaiter @ RestClient.ts:12 RestClient.ajax @ RestClient.ts:91 RestClient.post @ RestClient.ts:256 RestAPIClass.post @ RestAPI.ts:152 APIClass.post @ API.ts:102 addContact @ App.js:22 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070 executeDispatch @ react-dom.development.js:8243 processDispatchQueueItemsInOrder @ react-dom.development.js:8275 processDispatchQueue @ react-dom.development.js:8288 dispatchEventsForPlugins @ react-dom.development.js:8299 (anonymous) @ react-dom.development.js:8508 batchedEventUpdates$1 @ react-dom.development.js:22396 batchedEventUpdates @ react-dom.development.js:3745 dispatchEventForPluginEventSystem @ react-dom.development.js:8507 attemptToDispatchEvent @ react-dom.development.js:6005 dispatchEvent @ react-dom.development.js:5924 unstable_runWithPriority @ scheduler.development.js:646 runWithPriority$1 @ react-dom.development.js:11276 discreteUpdates$1 @ react-dom.development.js:22413 discreteUpdates @ react-dom.development.js:3756 dispatchDiscreteEvent @ react-dom.development.js:5889 xhr.js:172 XHR failed loading: POST "https://.execute-api.ap-southeast-1.amazonaws.com/dev/contact". dispatchXhrRequest @ xhr.js:172 xhrAdapter @ xhr.js:11 dispatchRequest @ dispatchRequest.js:59 Promise.then (async) request @ Axios.js:53 wrap @ bind.js:9 RestClient._request @ RestClient.ts:405 (anonymous) @ RestClient.ts:214 Promise.then (async) (anonymous) @ RestClient.ts:186 step @ RestClient.ts:12 (anonymous) @ RestClient.ts:12 (anonymous) @ RestClient.ts:12 push../node_modules/@aws-amplify/api-rest/lib-esm/RestClient.js.__awaiter @ RestClient.ts:12 RestClient.ajax @ RestClient.ts:91 RestClient.post @ RestClient.ts:256 RestAPIClass.post @ RestAPI.ts:152 APIClass.post @ API.ts:102 addContact @ App.js:22 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070 executeDispatch @ react-dom.development.js:8243 processDispatchQueueItemsInOrder @ react-dom.development.js:8275 processDispatchQueue @ react-dom.development.js:8288 dispatchEventsForPlugins @ react-dom.development.js:8299 (anonymous) @ react-dom.development.js:8508 batchedEventUpdates$1 @ react-dom.development.js:22396 batchedEventUpdates @ react-dom.development.js:3745 dispatchEventForPluginEventSystem @ react-dom.development.js:8507 attemptToDispatchEvent @ react-dom.development.js:6005 dispatchEvent @ react-dom.development.js:5924 unstable_runWithPriority @ scheduler.development.js:646 runWithPriority$1 @ react-dom.development.js:11276 discreteUpdates$1 @ react-dom.development.js:22413 discreteUpdates @ react-dom.development.js:3756 dispatchDiscreteEvent @ react-dom.development.js:5889 createError.js:16 Uncaught (in promise) Error: Network Error at createError (createError.js:16) at XMLHttpRequest.handleError (xhr.js:81)

I tried it on 2 browsers and also installing aws-sdk in the function folder as experiments. I found some chats online about setting cors header for both the api and lambda but have yet to wrap my head around it.

Would appreciate any tips and tricks as I suck at Cors setups.

Prabhjotsb commented 3 years ago

@weisisheng I am seeing the exact same problem. I also think the backend code (as seen in video) is not actually posting anything to the DB. @mavi888 app.js for lambda function could help. Could you please add that to this repo?