当 OPTIONS 请求的 statusCode 为 200 时，为什么我在 API Gateway GET 请求上收到 CORS 错误？

Question

我正在尝试向连接到 lambda 函数的 AWS API 网关端点发出 GET HTTP 请求。

在使用 postman 进行测试时，端点和 lambda 函数照常工作，这是合乎逻辑的，因为 postman 不使用 CORS。

但是，在 chrome 上的 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.

但是，如果我查看 CORS 预检请求的响应，我会发现 "Access-Control-Allow-Origin" 存在：

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

我尝试使用两个 fetch and request 包来满足我的请求，使用以下代码（我将 request 调用包装在 Promise 中，以使用 async-await流程类似于 fetch 调用):

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);
    }
}

在此先感谢您的帮助

Answer 1

错误消息说：

No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access-Control-Allow-Origin header 缺少实际资源，而不是对预检 OPTIONS 请求的响应。

需要两个。

当 OPTIONS 请求的 statusCode 为 200 时，为什么我在 API Gateway GET 请求上收到 CORS 错误？

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

javascript

cors

fetch

aws-api-gateway

requestjs