POST request is success, but Chrome get XMLHttpRequestError - google-chrome

Question

I'm trying to upload binary file (to Amazon S3) from my localhost Vue page, using Amazon API Gateway with CORS enabled.
Actual POST Request have issued after Preflight Request issued.
And file upload have succeed.
But the POST Request have caught error bellow.
I don't know Why got the error?
Chrome(Version 79.0.3945.79)
got message
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)
Source code
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);
});
Header(Preflight Request)
Request
: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
Response
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
Header(Actual POST)
Request
: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
Response
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

Answer 1

I solved it myself.
I don't know Why got the error?
Because Response header includes NO 'access-control-allow-origin'.
Browser could't read response body by CORB (Cross-Origin Read Blocking).
Added the header to response in Lambda function, it works.
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": "*"
}
});
});