danurbanowicz / eleventy-netlify-boilerplate

A template for building a blog with the Eleventy static site generator and Decap CMS

Home Page:https://eleventy-netlify-boilerplate.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Preview of a post in netlifycms broken

psandtner opened this issue · comments

Without any change on my side since a few days/weeks ago there is the following error in Safari-Console:

Failed to load resource: Cross-origin redirection to https://unpkg.com/htm@2.2.1/dist/htm.module.js?module denied by Cross-Origin Resource Sharing policy: Origin https://www.domainnamechangedforthisissue.de is not allowed by Access-Control-Allow-Origin. https://www.domainnamechangedforthisissue.de/.netlify/git/github/contents/.gitattributes?ts=1573207213206&ref=master

Is this a unpkg.com-related problem? I’m a bit lost and cannot find any pointers to this...

Have you tested this by deploying the demo site to Netlify to see if it happens? I'm unable to reproduce this error.

https://app.netlify.com/start/deploy?repository=https://github.com/danurbanowicz/eleventy-netlify-boilerplate&stack=cms

Please provide more info if you can and I'll have a closer look.

Yes, I just tested with a fresh deployment. Hm... I can provide you with some screenshots to show how it looks like.

edit_article_preview

safari_console

Thanks for you help!

The CORS error is probably specific to your version of Safari, as I'm unable to replicate it with any of my browsers. And as I didn't do the post preview templates PR myself, I'm unfamiliar with how it's been built.

Not sure if this will work, but if you're interested in investigating this yourself, you could try implementing Netlify's proxy redirecting by adding something like the following in your netlify.toml to proxy requests for those unpkg modules through Netlify, thereby - in theory - bypassing the CORS policy on unpkg.com

[[redirects]]
  from = "/unpkg/*"
  to = "https://unpkg.com/:splat"
  status = 200
  force = true
  headers = {Access-Control-Allow-Origin = "*"}

The final 2 errors in your screenshot are caused by Netlify CMS looking for Git Large File Storage settings and these errors, although a bit worrying, are apparently normal.

The missing favicon.ico 404 has been fixed.

Problem also occurs using Chrome or Firefox:
firefox_console

What the hell is "hastebrot.static.observableusercontent.com"?

I just tried your "redirects"-suggestion. To no avail...

It might be worth opening an issue at netlify/netlify-cms as it's not obvious to me what is causing this error and I'm unable to reproduce it and therefore fix it.

Also check your firewall, ad-blocker, proxy etc if required in case it's something really simple causing the error.

Anyway, if you get any closer to solving this, please let me know!

Thanks for your help, Dan! I will probably do that.

Also, if you need a temporary fix to this error, you could copy and host the offending module(s) locally in your Netlify project instead of via unpkg.com

-import htm from "https://unpkg.com/htm?module";
+import htm from "/admin/preview-templates/htm.js";

in

admin/preview-templates/page.js and
admin/preview-templates/post.js

Preview is working again!

OK, good to hear you got a temporary fix working at least.

I'm closing this issue for now but let me know if you want to re-open it.