Question

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

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

但是，在chrome上使用Firefox进行测试时，出现以下错误：

Firefox：

跨源请求被阻止：同源策略禁止读取[ url ]上的远程资源（原因：缺少CORS标头“ Access-Control-Allow-Origin”）。

Chrome浏览器：

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

但是，如果我查看CORS Preflight请求的响应，就会发现存在“ Access-Control-Allow-Origin”：

HTTP / 2.0 200确定
  日期：2019年3月12日，星期二15:22:57 GMT
  内容类型：application / json
  内容长度：0
  x-amzn-requestid：[x-amzn-requestid]
   access-control-allow-origin：*
  access-control-allow-header：内容类型，X-Amz日期，授权，X-Api-Key，X-Amz-Security-Token
  x-amz-apigw-id：[x-amz-apigw-id]
  访问控制允许方法：GET，OPTIONS
  X-Firefox-Spdy：h2

我尝试通过以下代码同时使用fetch和request软件包，并使用以下代码（我将 request 调用包装在Promise中，以使用异步-像 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

错误消息显示：

所请求的资源上没有“访问控制允许来源”标头。

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

它必须同时在上。

当OPTIONS请求具有statusCode 200时，为什么在API Gateway GET请求上出现CORS错误？

1 个答案: