如何修复 webflow 和 netlify 之间的 CORS 问题

Question

我已经部署了我的第一个 netlify 站点，它只是 returns 来自 airtable 的一些记录：

https://codefy-airtable.netlify.app/.netlify/functions/courses

它也适用于我设置的重定向：-

https://codefy-airtable.netlify.app/api/courses

然而，当我在 webflow 中向我的 header 脚本添加一个 axios get 函数来测试它时，我得到一个 CORS 错误：-

“Access to XMLHttpRequest at ‘https://codefy-airtable.netlify.app/.netlify/functions/courses’ from origin ‘https://mgl-community.webflow.io’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”

mgl-community.webflow.io

让给生活 |社区这是我的功能：-

   axios.get('https://codefy-airtable.netlify.app/.netlify/functions/courses')
  .then(function (response) {
    console.log('axios ', response);
  })
  .catch(function (error) {
    console.log('Axios ', error);
  });

这是我的 github 存储库 https://github.com/jonathanlyon/airtable-temp，它显示了 _header 文件：-

/*
Access-Control-Allow-Origin: *

和 .toml 文件：

[[headers]]
for = "/*"
[headers.values]
Access-Control-Allow-Origin = "*"

知道为什么我不能使用从 URL 返回的 json 数据吗？

谢谢

乔纳森

Answer 1

我找到了一种将 headers 添加到我的代码中的方法，现在可以使用了。似乎尽管有一个 _header 文件并将 headers 添加到 Netlify 中的 .toml 文件，但它并没有达到目的。

在我的 api return 我添加了 headers:-

module.exports = (statusCode, body) => {
    return {  
        headers: {
          "Access-Control-Allow-Origin": "*"
        },
        statusCode: 200,
        body: JSON.stringify(body)
      };

    };

Answer 2

你必须修改你的API，使用以下命令安装 cors：npm install cors，然后在你的中间件中：

import cors from 'cors'

app.use (cors ())

Answer 3

我遇到了同样的问题，发现问题是由于“同步无服务器函数的10秒执行限制”的限制（参考：https://docs.netlify.com/functions/overview/）

我的发现是，Netlify函数调用10秒后，Netlify函数会继续运行，然而，响应中包含body

TimeoutError: Task timed out after 10.00 seconds new TimeoutError (D:\yourModule\node_modules\netlify-cli\node_modules\lambda-local\build\lib\utils.js:110:28) Context. (D:\yourModule\node_modules\netlify-cli\node_modules\lambda-local\build\lib\context.js:110:19) listOnTimeout (internal/timers.js:554:17) processTimers (internal/timers.js:497:7)

Body of response (by Postman)

和 header 只有键“x-powered-by”、“日期”、“连接”和“content-length”。

Header of response (by Postman)

由于没有'Access-Control-Allow-Origin'header，浏览器显示错误信息

Access to XMLHttpRequest at 'http://localhost:8888/.netlify/functions/yourFunction/' from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

在 Firefox 中，错误信息是

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8888/.netlify/yourFunction/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

然而，根本原因不是服务器中的 CORS 设置。错误信息可能会将您引向错误的方向。

如何修复 webflow 和 netlify 之间的 CORS 问题

How to fix CORS issue between webflow and netlify

cors

netlify

webflow