0

我已经部署了我的第一个 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 数据吗?

谢谢

乔纳森

4

3 回答 3

0

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

在我的 api 返回中,我添加了标题:-

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

    };
于 2021-01-26T15:43:07.190 回答
0

我遇到了同样的问题,发现问题是由于“同步无服务器函数的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 设置。错误消息可能会将您引向错误的方向。

于 2021-06-19T04:46:35.333 回答
0

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

import cors from 'cors'

app.use (cors ())
于 2021-04-03T05:48:05.927 回答