仅在使用 URL 查询字符串参数时出现 CORS 错误

Question

我在使用 AWS API Gateway 的资源上有一个

GET

方法，带有 URL 查询字符串参数，但这不是必需的。我已为资源启用 CORS，并且存在

OPTIONS

方法，并且适用于其他授权的 API 调用。

如果我在不带字符串参数的情况下从前端调用

GET

方法，则一切正常，没有问题。当我通过 API 网关控制台使用字符串参数运行“测试”时，一切正常。如果我使用字符串参数从前端调用该方法，则会收到 CORS 错误：

Access to fetch at 'myAPIURL' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

有关API的其他信息：

• 它用于触发 lambda 函数来获取一些 DynamoDB 记录
• 没有其他方法有CROS错误，但没有其他方法使用字符串参数
• 有些方法使用路径参数，并且工作正常
• 通过 Cognito 进行授权

我的前端API调用如下：

fetchInvoices(strParam){
    const returnedData = null;
    const url = invokeURL + encodeURIComponent("invoicess?invYear=" + strParam);
    fetch(url, { headers: { "Authorization": token } })
        .then(response => { 
        return response.json() 
    })
    .then(jsonData => {
        returnedData = jsonData;
    })
    .catch(e => {
        console.log(e)
    })
    return returnedData
}

为什么字符串参数会导致CORS错误？

Answer 1

您的问题在于以下行：

const url = invokeURL + encodeURIComponent("invoicess?invYear=" + strParam);

让我们看一个例子，比如说

invokeURL = 'https://example.com/'

和

strParam = '2024'

。鉴于此，您的

url

变量实际上是：

https://example.com/invoicess%3FinvYear%3D2024

现在的问题是，您的 API 网关会将

invoicess%3FinvYear%3D2024

视为 URL 的路径，而不是

invoicess

，这就是您收到 CORS 错误的原因。

---

解决方案是更改传递查询参数的方式：

const params = new URLSearchParams({ invYear: strParam });
const url = `${invokeURL}invoicess?${params.toString()}`;

URLSearchParams

已经完成了必要的URI编码，所以你不必担心它。