javascript - Why do I get a CORS error on API Gateway GET request when the OPTIONS request has statusCode 200? - Stack Overflow

admin管理员组

文章数量:1426855

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

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

• javascript
• cors
• fetch
• aws-api-gateway
• requestjs

Share Improve this question Follow asked Mar 12, 2019 at 15:49 etienne-lelouetetienne-lelouet 7122 silver badges99 bronze badges 1

• content-type: application/json content-length: 0 — Your OPTIONS response shouldn't say it is sending JSON if it is sending nothing. – Quentin Commented Mar 12, 2019 at 15:52

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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.

本文标签：