如何解决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错误

"从源'https://mgl-community.webflow.io'在'https://codefy-airtable.netlify.app/.netlify/functions/courses'处访问XMLHttpRequest已被CORS策略阻止：请求的资源上不存在'Access-Control-Allow-Origin'标头。"

mgl-community.webflow.io

Make Give Live |社区这是我的功能:-

   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

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

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

TimeoutError：在新的timeouterrr（D:\yourModule\node_modules\netlify cli\node\modules \lambda local\build\lib\utils.js:110:28）上下文中，任务在10.00秒后超时。（D:\yourModule\node_modules\netlify cli\node_modulas\lambda local\build\lib\context.js:110:19）listOnTimeout（internal/timers.js:554:17）processTimers

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

以及仅具有关键字“x-powered-by”、“date”、“connection”和“content-length”的报头。

回复的标题(由邮递员发送)

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

CORS 策略已阻止从源“http://localhost:3001”在“http://localhost:8888/.netlify/functions/yourFunction/”处访问 XMLHttpRequest：请求的资源上不存在“访问控制-允许-源”标头。

在Firefox中，错误消息是

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

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

Answer 2

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

import cors from 'cors'

app.use (cors ())

Answer 3

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

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

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

    };