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

Question

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

\n\n

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

\n\n

但是，在 chrome 上的 firefox 上测试时，出现以下错误：

\n\n

火狐浏览器：

\n\n

\n

跨源请求被阻止：同源策略不允许读取 [ url ] 处的远程资源（原因：CORS 标头 \xe2\x80\x98Access-Control-Allow-Origin\xe2\x80\x99 丢失）。

\n

\n\n

铬合金：

\n\n

\n

从源“ http://localhost:8080 ”获取 [ url ] 的访问已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

\n

\n\n

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

\n\n

\n

HTTP/2.0 200 OK
\n 日期：2019 年 3 月 12 日星期二 15:22:57 GMT
\n 内容类型：application/json
\n 内容长度：0
\n x-amzn-requestid：[x-amzn-requestid ]
\n 访问控制允许来源：*
\n 访问控制允许标头：内容类型、X-Amz-日期、授权、X-Api-Key、X-Amz-安全令牌
\n x -amz-apigw-id: [x-amz-apigw-id]
\n 访问控制允许方法: GET,OPTIONS
\n X-Firefox-Spdy: h2

\n

\n\n

我尝试使用fetch和request包来处理我的请求，并使用以下代码（我将请求调用包装在 Promise 中，以使用像fetch调用一样的异步等待流程）：

\n\n

const getPolicy = (baseUrl, bucketNameTranscribe, fileName, apiKey) => (\n    new Promise((resolve, reject) => {\n        request({\n             url: `${baseUrl}?bucketName=${bucketNameTranscribe}&key=${fileName}`,\n             method: "GET",\n             headers: {\n                 "x-api-key": apiKey\n             }\n        }, ((error, response) => {\n            if (error) {\n                reject(error);\n            } else if (response.statusCode === 200) {\n                resolve(JSON.parse(response.body));\n            } else {\n                reject(response);\n            }\n        });\n    })\n);\n\nconst upload = async() {\n    const {\n        policyUrl,\n        bucketNameTranscribe,\n        apiKey\n    } = awsConfig;\n    const fileName = `${Date.now()}.mp3`;\n    const req = new Request(\n        `${policyUrl}?bucketName=${bucketNameTranscribe}&key=${fileName}`,\n         {       \n             method: "GET",\n             headers: new Headers({\n                 "x-api-key": apiKey\n             })\n         }\n    );\n\n    try {\n        const response1 = await fetch(req);\n        console.log("fetch", response1);\n    } catch (error) {\n        console.error("errorFetch", error);\n    }\n\n    try {\n        const response2 = await getPolicy(policyUrl, bucketNameTranscribe, fileName, apiKey);\n        console.log("request", response2);\n    } catch (exp) {\n        console.error("errorRequest", exp);\n    }\n}\n

\n\n

在此先感谢您的帮助

\n

Answer 1

错误消息显示：

请求的资源上不存在“Access-Control-Allow-Origin”标头。

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

它需要同时存在。