cors - 如何解决 webflow 和 netlify 之间的 CORS 问题

Question

我已经部署了我的第一个 netlify 站点，它只从 airtable 中返回一些记录：

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

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

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

但是，当我在 webflow 中将 axios get 函数添加到我的头脚本中以对其进行测试时，我得到了一个 CORS 错误：-

“CORS 政策已阻止从源 'https://mgl-community.webflow.io' 访问 'https://codefy-airtable.netlify.app/.netlify/functions/courses' 上的 XMLHttpRequest：没有'访问-Control-Allow-Origin' 标头出现在请求的资源上。”</p>

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

我想出了一种在我的代码中添加标题的方法，现在它可以工作了。似乎尽管有一个 _header 文件并将标题添加到 Netlify 中的 .toml 文件，但它并没有起到作用。

在我的 api 返回中，我添加了标题：-

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

    };

Answer 2

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

我的发现是，在 10 秒后调用 Netlify 函数后，Netlify 函数将继续运行，但是，响应包含正文

TimeoutError：任务在 10.00 秒后超时新 TimeoutError (D:\yourModule\node_modules\netlify-cli\node_modules\lambda-local\build\lib\utils.js:110:28) 上下文。(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)

回复正文（由邮递员提供）

以及只有键“x-powered-by”、“date”、“connection”和“content-length”的标题。

响应的标题（邮递员）

由于没有“Access-Control-Allow-Origin”标头，浏览器会显示错误消息

从源“http://localhost:3001”访问“http://localhost:8888/.netlify/functions/yourFunction/”的 XMLHttpRequest 已被 CORS 策略阻止：没有“Access-Control-Allow-Origin”标头存在于请求的资源上。

在 Firefox 中，错误消息是

跨域请求被阻止：同源策略不允许读取位于 http://localhost:8888/.netlify/yourFunction/ 的远程资源。（原因：缺少 CORS 标头“Access-Control-Allow-Origin”）。

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

Answer 3

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

import cors from 'cors'

app.use (cors ())