Im working through the connection of the BillingForm component and I am receiving a
Request failed with status code 500 Error alert.
Blocked a frame with origin "http://localhost:3000" from accessing a frame with origin "https://js.stripe.com". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.
It seems that since I am on the
localhost dev environment, React, from the browser, as
http is not letting me access the
Stripe iFrame CardElement which is an
Looking at the logs in seed first for the deployment itself i see the following:
Dec 6, 11:30:54 AM 22.214.171.124 - - [06/Dec/2018:16:30:54 +0000] "OPTIONS /billing HTTP/1.1" 200 0 4d1eda09-f974-11e8-9295-355450434bf5
Dec 6, 11:30:54 AM 126.96.36.199 AROAJ52RLDUSSCLAVHIPS:CognitoIdentityCredentials AROAJ52RLDUSSCLAVHIPS:CognitoIdentityCredentials [06/Dec/2018:16:30:54 +0000] "POST /billing HTTP/1.1" 500 57 4d2f0625-f974-11e8-8a69-f1c7066f0985
So the app is definitely trying to access the billing resource at my serverless backend. Here are the logs for the Lamda function itself:
Dec 6, 11:30:54 AM START RequestId: 4d3261df-f974-11e8-9619-05a5a6b29c97 Version: $LATEST Dec 6, 11:30:54 AM END RequestId: 4d3261df-f974-11e8-9619-05a5a6b29c97 Dec 6, 11:30:54 AM Duration: 411.46 ms Billed Duration: 500 ms Memory Size: 1024 MB Max Memory Used: 32 MB
It looks from the console that React is blocking the exchange… Im not sure.
Here is an image of the error I am getting and the outputs to console:
Separately I can also see that the stripe frame is in fact able to capture the data entered by the user and the BillingForm is tokenizing the card correctly as can be seen by the output to the console showing the child attributes for the token created as can be seen below:
Ultimately it looks like I am not able to access my serverless
When I look at the header in the error message this is what it looks like and it says the Error is coming from
Here is the request object that is sent with the request and it too looks correct as it is holding the data that the backend
/billing API is expecting:
It looks like since my
localhost is on
http its not letting me access the endpoint correctly. Not sure why AWS is preventing this since I have my
CORS Policy set as per specs and all of the other endpoints work fine from
Not really sure what is wrong here, and I could use some help, what else can I look for to pinpoint this error?