如何在Netlify部署中启用CORS？

Question

我正在使用Netlify来提供一些静态的.json文件。它们在浏览器中加载得很好，但是当我试图通过JavaScript获取它们时，控制台会出现以下错误：

从来源'http://localhost:3000'访问 (重定向自 )已被CORS策略阻止：所请求的资源上没有'Access-Control-Allow-Origin'头。如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以禁用CORS并获取资源。

我检查了Netlify仪表板中我的站点设置中的所有选项，但没有看到任何启用CORS的选项，该怎么办？

- user967451

---

请检查此链接是否有所帮助：https://community.netlify.com/t/access-control-allow-origin-policy/1813 - Sami Haddad

@SamiHaddad 非常感谢！将/* Access-Control-Allow-Origin: * */保存在名为_headers（无扩展名）的文件中，并将其放置在与index.html相同的根目录下（不确定是否需要这一步，但我遵循了该评论）即可解决问题。如果您希望将此作为答案发布，我会接受！ - user967451

谢谢！我会根据您的评论添加一个。 - Sami Haddad

Answer 1

在你的index.html旁边添加一个名为_headers的文件，并使用以下内容：

/*
  Access-Control-Allow-Origin: *

在生产环境中，最好将其更改为您实际的来源，而不是使用*。

- Sami Haddad

Answer 2

更好的方法是使用类似这样的代理，

在项目的根目录中创建一个名为netlify.toml的文件。(即与index.html相邻的位置)

[[redirects]]
  from = "/<path-to-access-cors-url>"
  to = "<cross-origin-url>"
  status = 200
  force = true
  headers = {X-From = "Netlify"}
[[headers]]
  for = "/*"
  [headers.values]
    Access-Control-Allow-Origin = "*"

现在，将以下URL用于HTTP请求中，https://your-domain.com/<path-to-access-cors-url>

举个例子:

假设fakedomain.com是您的域名，并且您想从https://example.com/patha请求资源。

[[redirects]]
  from = "/pathx"
  to = "https://example.com/patha"
  status = 200
  force = true
  headers = {X-From = "Netlify"}
[[headers]]
  for = "/*"
  [headers.values]
    Access-Control-Allow-Origin = "*"

现在，您可以像这样在HTTP请求中使用URL：https://fakedomain.com/pathx。

- Raj Yadav

---

你的示例展示了如何使用客户端 https://fakedomain.com/pathx 从 Netlify 函数 https://example.com/patha 获取数据？toml 必须在服务器上吗？ - Timo

我想从两个Netlify函数中获取数据，你能展示在[[redirects]]中输入什么吗？我是否需要将每个函数放在一个新的redirect中？ - Timo

Toml文件应该被检入源代码控制，并在服务器上可用。对于重定向，您可以在“to”字段中捕获*通配符“https://example.com/one-path/*”，并将其用作“from”字段中的“:splat”，例如“https://example.com/another-path/:splat”。 - Adam Tolley

Answer 3

我按照这里所有其他建议所做的一样，但只有在本地运行时才有效。一旦进入生产环境，它就会失败。

我不得不像下面展示的那样向Netlify无服务器函数添加headers：

exports.handler = async (event, context) => {
  const response = {
    statusCode: 200,
    headers: {
      "Access-Control-Allow-Origin": "https://example.com"
    },
    body: JSON.stringify({ message: "Hello World" })
  };
  return response;
};

- Mark