I am trying to make an GET HTTP request to a AWS API Gateway endpoint connected to a lambda function.
The endpoint and lambda function work as usual when tested with postman which is logical since postman doesn't use CORS.
However, when testing on firefox on chrome, I get the following error :
Firefox:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [url] (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
Chrome:
Access to fetch at [url] from origin 'http://localhost:8080' has been blocked by CORS policy: 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.
But, if I look at the response of the CORS Preflight request, I see that "Access-Control-Allow-Origin" is present:
HTTP/2.0 200 OK
date: Tue, 12 Mar 2019 15:22:57 GMT
content-type: application/json
content-length: 0
x-amzn-requestid: [x-amzn-requestid]
access-control-allow-origin: *
access-control-allow-headers: Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token
x-amz-apigw-id: [x-amz-apigw-id]
access-control-allow-methods: GET,OPTIONS
X-Firefox-Spdy: h2
I tried using both the fetch and request packages for my request, with the following code (I wrapped the request call in a Promise, to use an async-await flow like the fetch call):
const getPolicy = (baseUrl, bucketNameTranscribe, fileName, apiKey) => (
new Promise((resolve, reject) => {
request({
url: `${baseUrl}?bucketName=${bucketNameTranscribe}&key=${fileName}`,
method: "GET",
headers: {
"x-api-key": apiKey
}
}, ((error, response) => {
if (error) {
reject(error);
} else if (response.statusCode === 200) {
resolve(JSON.parse(response.body));
} else {
reject(response);
}
});
})
);
const upload = async() {
const {
policyUrl,
bucketNameTranscribe,
apiKey
} = awsConfig;
const fileName = `${Date.now()}.mp3`;
const req = new Request(
`${policyUrl}?bucketName=${bucketNameTranscribe}&key=${fileName}`,
{
method: "GET",
headers: new Headers({
"x-api-key": apiKey
})
}
);
try {
const response1 = await fetch(req);
console.log("fetch", response1);
} catch (error) {
console.error("errorFetch", error);
}
try {
const response2 = await getPolicy(policyUrl, bucketNameTranscribe, fileName, apiKey);
console.log("request", response2);
} catch (exp) {
console.error("errorRequest", exp);
}
}
Thanks in advance for your help
The error message says:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
The Access-Control-Allow-Origin
header is missing from the actual resource, not the response to the preflight OPTIONS request.
It needs to be on both.