When I attempt to request a lambda-backed API (using API gateway, deployed using the CLI and Cloud Development Kit) from my react app, I get the following error:
Access to XMLHttpRequest at 'https://xxxxxxxxxx.execute-api.eu-west-1.amazonaws.com/prod/xxxxx' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
GET https://xxxxxxxxxx.execute-api.eu-west-1.amazonaws.com/prod/xxxxx net::ERR_FAILED
My API resources defined using the CDK are all passed into this method
Like explain here, you need to enable CORS in API Gateway, BUT you also need to return an Access-Control-Allow-Origin header from your Lambda because API Gateway doesn't add that automatically to the responses.
Here is a sample of what my Lambda return for a simple Get :
return {
headers,
body: JSON.stringify(response.Item),
statusCode: 200
};
const headers = {
"Access-Control-Allow-Origin": "*", // Required for CORS support to work
"Access-Control-Allow-Credentials": true // Required for cookies, authorization headers with HTTPS
}
Related
I'm making an API request to the Beehiiv API, to get my list of publications.
Inside my React component, I've set up a fetch request to the API. However the request is being being blocked by the CORS policy. Request code below:
async function makeRequest(){
const fetchOptions = {
method: 'get',
headers: {
"X-ApiKey": '<MY API KEY>',
"Content-Type": "application/json",
"Access-Control-Allow-Origin" : '*'
},
}
fetch('https://api.beehiiv.com/v1/publications', fetchOptions).then( response => response.json() )
.then( data => console.log(data) )
}
makeRequest();
The response in the console is as follows:
Access to fetch at 'https://api.beehiiv.com/v1/publications' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Calling other API's does not seem to result in getting blocked.
Any ideas on why this may be happening? Please let me know! Thanks!
From beehiiv API documentation:
API keys are considered sensitive data and should not be shared with anyone. Be careful not to expose the API key in your source code or any other public location (including front-end code).
The API isn't supposed to be called from the frontend.
You need to make AJAX requests to your own server, which then calls the API, so the API key isn't exposed.
I am able to integrate RazorPay in my application. After successful payment I am trying to call RazorPay REST API fetchPayment to get the complete detail of transaction but facing below error.
Access to XMLHttpRequest at 'https://api.razorpay.com/v1/payments/pay_Fxxxxxxxxx' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
I tried with passing 'Access-Control-Allow-Origin': '*' in header but still not working.
I'm writing totally simple JS code to connect to the Evernote sandbox, which is pretty the same as the one in the documentation:
const Evernote = require("evernote");
const client = new Evernote.Client({
token: "here-is-my-developer-token1234",
sandbox: true
});
const userStore = client.getUserStore();
userStore.getUser().then(function(user) {
console.log(user)
});
Though, I get an error about the CORS policy, which, I suppose, means that my authentification failed for some reason:
Access to fetch at 'https://sandbox.evernote.com//edam/user' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
I've got my token from there: https://sandbox.evernote.com/api/DeveloperToken.action
Perhaps there is something basic I'm missing. Any guidance would be appreciated.
As you can see in JS SDK docs, they do not support CORS, that is, header authentification as well. So you will need to use oauth.
I'm running my Vue app locally from http://localhost:8080 and I keep getting a slew of CORS errors, I've added the Access-Control-Allow-Origin header as seen blow but keep getting the following warning:
' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
const graphCall = () => {
let tokenOptions = {
method: 'POST',
uri: 'https://login.microsoftonline.com/**key**/oauth2/v2.0/token',
headers: {
'Access-Control-Allow-Origin': 'http://localhost:8080',
'contentType': 'application/x-www-form-urlencoded'
},
form: {
grant_type: VUE_APP_GRANT_TYPE,
client_secret: VUE_APP_CLIENT_SECRET,
scope: VUE_APP_SCOPE,
client_id: VUE_APP_CLIENT_ID
}
};
return rp(tokenOptions)
.then(data => {
console.log(data)
}).catch((err) => {
console.log(err);
});
};
I've tried adding mode: 'no-cors' but just get the following - Error: Invalid value for opts.mode
I've also tried '*' as the access control origin but to no avail.
Is there a way through this CORS nightmare as we need to make this call to retrieve a key!
The server has to allow your origin, in this case http://localhost:8080. Often in scenarios where you are interacting with a provider, in the admin portal where you create the tokens, you also have to specify the domain from which you intend on calling it from.
If this is not the case you may be triggering CORS because you are using a header not on the CORS safe list.
https://fetch.spec.whatwg.org/#cors-safelisted-request-header
Access-Control-Allow-Origin is normally the header supplied by the server on a response, it is not meant to be sent on the request.
The following link helped me understand CORS better.
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Do note that allowing the origin of * is fine for development but not recommended for production applications.
Trying to get a request from a React app to Google Maps API working but getting CORS issues. Google says it supports CORS but not sure how to make the right request to be able to retrieve place data.
const src = `https://maps.googleapis.com/maps/api/place/details/json?key=${GOOGLE_API_KEY}&placed=${id}&fields=formatted_phone_number`
const headers = {
'Access-Control-Allow-Origin' : '*'
}
fetch(src, { mode: 'cors', headers: headers }).then(response => console.log(response))
The src itself is fine but getting this issue:
Failed to load
https://maps.googleapis.com/maps/api/place/details/json?key=(keyRemoved)&placed=(placeRemoved)&fields=formatted_phone_number:
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:8000' is therefore not allowed
access.
I think your best bet is to use the Places service in the Javascript API
https://developers.google.com/maps/documentation/javascript/reference/3.exp/places-service#PlacesService