时间戳

首页 > 解决方案 > POST 请求成功，但 Chrome 获取 XMLHttpRequestError

google-chrome - POST 请求成功，但 Chrome 获取 XMLHttpRequestError

问题描述

我正在尝试使用启用了 CORS 的 Amazon API Gateway 从我的本地主机 Vue 页面上传二进制文件（到 Amazon S3）。

发出预检请求后发出实际的 POST 请求。
并且文件上传成功。

但是 POST 请求在下面发现了错误。

不知道为什么会报错？

Chrome（版本 79.0.3945.79）

收到消息

Access to XMLHttpRequest at 'https://XXXXXXXXXXX.execute-api.ap-northeast-1.amazonaws.com/dev/upload' from origin 'http://192.168.0.20:8080' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

AXIOS ERROR:  Error: Network Error
    at createError (createError.js?2d83:16)
    at XMLHttpRequest.handleError (xhr.js?b50d:81)

源代码

async upload() {
    console.log("file:", this.file);

    const axiosConfig = {
        headers: {
            "Content-Type": "image/png"
        }
    };
    axios
        .post("https://XXXXXXXXXX.execute-api.ap-northeast-1.amazonaws.com/dev/upload", this.file, axiosConfig)
        .then(res => {
            console.log("RESPONSE RECEIVED: ", res);
        })
        .catch(err => {
            console.log("AXIOS ERROR: ", err);
        });

标头（预检请求）

要求

:authority: XXXXXXXXXX.execute-api.ap-northeast-1.amazonaws.com
:method: OPTIONS
:path: /dev/upload
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9,ja;q=0.8
access-control-request-headers: content-type
access-control-request-method: POST
origin: http://192.168.0.20:8080
referer: http://192.168.0.20:8080/
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.79 Safari/537.36

回复

access-control-allow-headers: Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token
access-control-allow-methods: DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT
access-control-allow-origin: *
content-length: 0
content-type: application/json
date: Fri, 13 Dec 2019 12:39:40 GMT
status: 200
via: 1.1 88c2e4442XXX3f0dXXX7df6fcXXX37ff.cloudfront.net (CloudFront)
x-amz-apigw-id: EpH19E9sNjMFhOg=
x-amz-cf-id: PEXXXH0x8_mlAspmv-xhi3X3XXXn_LSBswhXXXyqnCGZmVPkXXXYhw==
x-amz-cf-pop: NRT51-C1
x-amzn-requestid: 47XXc915-3b44-4XX7-959a-3XXX62150b3d
x-cache: Miss from cloudfront

标头（实际 POST）

要求

:authority: XXXXXXXXXX.execute-api.ap-northeast-1.amazonaws.com
:method: POST
:path: /dev/upload
:scheme: https
accept: application/json, text/plain, */*
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9,ja;q=0.8
content-length: 6849
content-type: image/png
origin: http://192.168.0.20:8080
referer: http://192.168.0.20:8080/
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.79 Safari/537.36

回复

content-length: 47
content-type: application/json
date: Fri, 13 Dec 2019 12:39:40 GMT
status: 200
via: 1.1 88c2e44426XX3f0db837df6fc92437ff.cloudfront.net (CloudFront)
x-amz-apigw-id: EpH1_EeptjMFXqw=
x-amz-cf-id: XXqDis00oJqvh8wY-a0sugE6tuhwPHiJLs7ucXX5OdPC0uoCql7-nQ==
x-amz-cf-pop: NRT51-C1
x-amzn-requestid: 9XXX54a0-0a71-4cda-9d91-ae90a3322c9f
x-amzn-trace-id: Root=1-5XXX868c-fXXXa33dd82751efXXX547d;Sampled=0
x-cache: Miss from cloudfront

标签： google-chromevuejs2aws-lambdacorsaws-api-gateway

解决方案

我自己解决了。

不知道为什么会报错？

因为响应标头包含 NO 'access-control-allow-origin'。
浏览器无法通过 CORB（跨源读取阻止）读取响应正文。

将标头添加到 Lambda 函数中的响应中，它可以工作。

s3.putObject({
  Body: requestBody,
  Bucket: "xxxxxx.com",
  ContentType: "image/png",
  Key: "uploadTest/logo.png"
})
  .promise()
  .then(result => {
    const message = JSON.stringify(result);
    callback(null, {
      body: message,
      statusCode: 200,
      headers: {
        "Access-Control-Allow-Origin": "*"
      }
    });
  });

推荐阅读