Static Astro site CORS error after deploying to Netlify.

huangapple go评论66阅读模式
英文:

Static Astro site CORS error after deploying to Netlify

问题

我使用Astro在一个私有的GitHub仓库上创建了一个静态网站。我能够将其连接到Netlify。一切都很顺利,我也可以部署构建;但是当我加载主页(比如说,index.html在https://example.com/)时,我会收到CORS错误(我猜是与从Cloudflare CDN加载的资源有关):

> 来源“我的域名”对脚本https://d33wubrfki0l68.cloudfront.net/js/0f2b5ea850b0bc00d0d93eb733c74d30fdfc396f/assets/hoisted.e9f943e8.js的访问已被CORS策略阻止:所请求资源上不存在“Access-Control-Allow-Origin”标头。

我尝试在项目的根目录(与其他配置文件一起)添加了一个netlify.toml文件,并包含以下内容:

[[headers]]
  for = "/*"
  [headers.values]
    Access-Control-Allow-Origin = "*"

我还尝试在公共目录中添加了一个_headers文件(与index.html文件紧邻的位置),内容如下:

/* 
  Access-Control-Allow-Origin: *

两者都未解决问题,我仍然收到相同的错误。顺便说一下,这仅发生在这个页面上,因为我有另一个页面叫做terminal(https://example.com/terminal),它使用了大量的JavaScript,一切正常。

无论如何,我不得不手动部署我的网站,而不是将项目连接到GitHub仓库,也无法利用Netlify的资源处理(与我目前获得的相比)或自动构建。

我应该怎么做?

即使我只能告诉Netlify一开始不要将这些脚本放在CDN上,问题也会解决;因为手动部署dist文件夹可以解决问题,而且我实际上并不需要CDN,因为我的网站在GTMetrix统计数据方面做得非常好。

英文:

I've created a static website using Astro on a private GitHub repository. I was able to connect it to Netlify. Everything is fine and I also get builds deployed; But when I load the main page (index.html at, let's say, https://example.com/) I get CORS error (I guess regarding to assets loading from Cloudflare CDN):

> Access to script at 'https://d33wubrfki0l68.cloudfront.net/js/0f2b5ea850b0bc00d0d93eb733c74d30fdfc396f/assets/hoisted.e9f943e8.js' from origin "my domain" has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I've tried adding a netlify.toml file at the root of my project (next to other configuration files) with the following content:

[[headers]]
  for = "/*"
  [headers.values]
    Access-Control-Allow-Origin = "*"

I've also tried adding a _headers file to the public directory (which gets built right next to the index.html file) with the following content:

/* 
  Access-Control-Allow-Origin: *

Neither have solved the problem and I get the same error. BTW, it's only on this page, because I have another page called terminal (https://example.com/terminal) which uses lot's of JavaScript and everything works fine.

Anyway, I had to deploy my website manually instead of having the project connected to the GitHub repository and couldn't leverage Netlify's asset handling (compared to what I get right now) or automatic builds.

What should I do?

Even if I were just able to tell Netlify not to put these scripts on the CDN at the first place, that would solve the problem; since deploying the dist folder manually solves the issue, and I don't really need the CDN because my website is doing pretty well regarding GTMetrix stats

答案1

得分: 1

这告诉 Astro 捆绑所有客户端 js 文件并将它们添加到构建目录的根目录(在我的情况下为 dist),而不是像 assets 或其他子文件夹一样。

英文:

It turns out all I had to do was to add this piece of code to the Astro configuration file (astro.config.mjs in my case):

import { defineConfig } from 'astro/config';
// other imports

export default defineConfig({
	// other configs

	vite: {
	   build: {
	      rollupOptions: {
	         output: {
	            entryFileNames: '[name]-[hash].js',
			 },
		  },
	   },
	},
});

Which tells Astro to bundle all client-side js files and add them to the root of the build directory (dist in my case) instead of a subfolder like assets or whatever.

huangapple
  • 本文由 发表于 2023年7月17日 21:58:23
  • 转载请务必保留本文链接:https://go.coder-hub.com/76705197.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定