Why CORS error happens even if Access-Control-Allow-Origin is present in OPTIONS response in AWS lambda trigger (API Gateway of REST API) - aws-lambda

Question

I'm mad. Why error No 'Access-Control-Allow-Origin' header is present on the requested resource still raises even if 'Access-Control-Allow-Origin' is present in preflight response?
this is my configure:
AWS lambda function backend code (nodejs):
'use strict';
require('dotenv').config();
const mysql = require('mysql2/promise');
exports.handler = async (event, context, callback) => {
if (event.httpMethod == 'OPTIONS') {
return {
headers: {
"foo": "bar",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept",
"Access-Control-Allow-Methods": "OPTIONS,POST,GET"
},
statusCode: 200,
}
}
if (!event.body) {
throw new Error("no body provided")
}
const body = JSON.parse(event.body)
if (!body.statement) {
throw new Error("no statement provided")
}
const connection = await mysql.createConnection(process.env.DATABASE_URL);
const [results] = await connection.query(body.statement)
connection.end();
let response = {
statusCode: 200,
headers: {
"Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "OPTIONS,POST,GET"
},
contentType: "application/json",
body: JSON.stringify(results)
};
return response;
};
this is the trigger configure (API Gateway of REST API)
API Gateway: planetscale-API
arn:aws:execute-api:ap-northeast-1:288496770745:832iyue4j2/*/*/planetscale
API endpoint: https://832iyue4j2.execute-api.ap-northeast-1.amazonaws.com/default/planetscale
Details
API type: REST
Authorization: NONE
Method: ANY
Resource path: /planetscale
Service principal: apigateway.amazonaws.com
Stage: default
Statement ID: lambda-11567109-822a-4850-abcf-14a1b0565c54
and this is the js code:
await axios.post("https://832iyue4j2.execute-api.ap-northeast-1.amazonaws.com/default/planetscale", { statement:"select * from t" });
this is what happend in chrome network
1.preflight request
Request URL: https://832iyue4j2.execute-api.ap-northeast-1.amazonaws.com/default/planetscale
Request Method: OPTIONS
Status Code: 200
Remote Address: 127.0.0.1:64646
Referrer Policy: strict-origin-when-cross-origin
access-control-allow-headers: Origin, X-Requested-With, Content-Type, Accept
access-control-allow-methods: OPTIONS,POST,GET
access-control-allow-origin: *
content-length: 0
content-type: application/json
date: Tue, 09 Aug 2022 09:24:19 GMT
x-amz-apigw-id: WlsmmH0mNjMFZGA=
x-amzn-requestid: d25ff521-94ee-48d2-bc33-68bb92495b42
x-amzn-trace-id: Root=1-62f227c3-14547cf1741c86e83d846763;Sampled=0
xxxx: aaaa
:authority: 832iyue4j2.execute-api.ap-northeast-1.amazonaws.com
:method: OPTIONS
:path: /default/planetscale
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: zh-CN,zh;q=0.9
access-control-request-headers: content-type
access-control-request-method: POST
origin: http://localhost:8080
referer: http://localhost:8080/
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
2. POST request
Request URL: https://832iyue4j2.execute-api.ap-northeast-1.amazonaws.com/default/planetscale
Request Method: POST
Status Code: 502
Referrer Policy: strict-origin-when-cross-origin
content-length: 36
content-type: application/json
date: Tue, 09 Aug 2022 09:24:20 GMT
x-amz-apigw-id: WlsmpE_HtjMFmfw=
x-amzn-errortype: InternalServerErrorException
x-amzn-requestid: a3f991a8-1f6b-445f-b5db-697c7efaa1f8
:authority: 832iyue4j2.execute-api.ap-northeast-1.amazonaws.com
:method: POST
:path: /default/planetscale
:scheme: https
accept: application/json, text/plain, */*
accept-encoding: gzip, deflate, br
accept-language: zh-CN,zh;q=0.9
content-length: 50
content-type: application/json
origin: http://localhost:8080
referer: http://localhost:8080/
sec-ch-ua: ".Not/A)Brand";v="99", "Google Chrome";v="103", "Chromium";v="103"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
this is what happends in chrome console :
localhost/:1
Access to XMLHttpRequest at 'https://832iyue4j2.execute-api.ap-northeast-1.amazonaws.com/default/planetscale' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
App.vue?18cf:151 error aws lambda
xhr.js?ed5b:220
POST https://832iyue4j2.execute-api.ap-northeast-1.amazonaws.com/default/planetscale net::ERR_FAILED 502
dispatchXhrRequest # xhr.js?ed5b:220
xhrAdapter # xhr.js?ed5b:16
dispatchRequest # dispatchRequest.js?d0b9:58
request # Axios.js?3509:109
httpMethod # Axios.js?3509:144
wrap # bind.js?285c:9
Comment.query # models.js?a3ef:37
exec # modelsql.mjs?8304:626
download # App.vue?18cf:149
tryDownload # App.vue?18cf:200
invokeWithErrorHandling # vue.runtime.esm.js?3841:2988
invoker # vue.runtime.esm.js?3841:1786
original_1._wrapper # vue.runtime.esm.js?3841:7405