我最近必须在Netlify上构建一个Astro网站，我们需要定制标题。事实证明，有几种不同的方法可以做到这一点，其中一些是很奇怪的，其中一些对您的用例会比其他情况更好。
我在这里写下这一点，因为我知道有一天我需要再次引用这个事实，因为cors错误是最糟糕的，无所不在的。
无论如何！
还有其他方法，但我只会列出三个，因为这三个似乎对我来说最有用。我也只是为Access=Control-Allow-Origin标头做，因为您可能会弄清楚如何添加其他人。
另外，如果需要的话，这是Astro documentation for the Netlify integration！我们假设您将koude1软件包安装了，如果您将Astro用于服务器端渲染或按需构建器。
在您的Astro配置中设置标头
在Astro中设置标头的第一种方法直接位于astro.config.mjs文件中。
// astro.config.mjs
import { defineConfig } from "astro/config";
import netlify from "@astrojs/netlify/functions";
export default defineConfig({
output: "server",
server: {
headers: {
"Access-Control-Allow-Origin": "*"
}
},
adapter: netlify()
});
如果您在服务器端渲染模式下运行Astro站点，则可以很好地工作，但是有时在Netlify上有点奇怪（而且我承认我不知道所有情况，例如涉及Edge功能或其他情况等等），因此，如果它不起作用，请不要担心，还有其他选择！
Netlify配置文件中的设置标题
您可以在netlify.toml中设置标题（docs here）：
# netlify.toml
[[headers]]
for = "/*"
[headers.values]
Access-Control-Allow-Origin = "*"
还有一个非常相似的NetLify支持的_headers文件：
# _headers
/*
Access-Control-Allow-Origin: *
and and and and obiaqian7（再次在netlify.toml中）仍然相似，您可以采用相对路线，将其指向绝对路线，然后添加标头。
# netlify.toml
[[redirects]]
from = "/search"
to = "https://somewebsitethatimadeup.biz/search/*"
status = 200
force = true
headers = { Access-Control-Allow-Origin = "*" }
此NetLify配置方法最适合静态站点，而不是使用无服务器功能或边缘功能的任何内容。
设置带有边缘功能的标题作为中间件
这可能是设置标头的最“高级”方法，但是它确实可以很好地效法，您可以为其添加更多的自定义逻辑（此外，我认为它也有最小的限制）。
首先，您必须在netlify/edge-functions/中制作一个边缘功能文件（我将调用mine headers.js），然后在netlify.toml：
中指向它
# netlify.toml
[[edge_functions]]
path = "/*"
function = "headers" # or whatever your file name is
然后，在该headers.js文件中，您添加标题：
// headers.js
export default async (request, context) => {
const response = await context.next();
// You need this if you are calling this from the browser
// to handle CORS preflight stuff
if (request.method === "OPTIONS") {
return new Response("ok", {
headers: {
"Access-Control-Allow-Origin": "*",
}
});
}
response.headers.set("Access-Control-Allow-Origin", "*");
return response;
};
如果您不添加该OPTIONS条件，则每当您调用The Edge功能时，您可能会看到这样的错误：
Access to fetch at '...' from origin '...' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
无论如何，在这里，您可以在有条件地添加标题，添加多个标头的任何逻辑上做任何逻辑，无论您想要什么！
结束
这些都是我最终在我的作品Contenda中与某些项目一起工作的所有事情，如果您想看一些示例，您可能会在我们的一些open source repos中找到其中的一些。
。这一切都说...
未来的卡西迪：欢迎回来。我看到您再次遇到了同一CORS问题。您什么时候会学习？
对其他所有人：我希望这对您有帮助，直到下次！