英文:
Pug template not loading CSS on Mac in safari
问题
Safari 在 Mac（Ventura 13.2.1）中无法加载 CSS 或与 Pug 结合使用时无法加载 favicon。
请帮忙找到解决方案。
错误：
尝试加载 URL https://localhost:3000/img/icons.svg 来自 http://localhost:3000 的不安全尝试。域、协议和端口必须匹配。
无法加载资源：发生 SSL 错误，无法与服务器建立安全连接。
开发者模式下的网络选项卡：
摘要
URL: https://localhost:3000/css/style.css
状态: —
源: —
启动者:
localhost:1
印象：
看起来问题与 SSL 有关。
文件位置
root>public>css>style.css
代码示例
app.use(express.static(path.join(__dirname, 'public')));
doctype html
html(lang='en')
head
link(rel='stylesheet' href='/css/style.css' type='text/css')
link(rel='shortcut icon' type='image/png' href='/img/favicon.png')
到目前为止所做的事情：
我在谷歌上搜索了这个问题，看起来开发者们也遇到了类似的问题。我尝试了建议的解决方案，但问题仍未解决。
我切换到了 Chrome，一切都正常工作。
尝试过的一些示例：
res.set(
'Content-Security-Policy',
"default-src 'self';font-src fonts.gstatic.com;style-src 'self' 'unsafe-inline' fonts.googleapis.com"
);
style
include css/style.css
英文:
Safari on Mac (Ventura 13.2.1) neither loads CSS nor favicon in combination with Pug.
Please help find a solution.
Error:
Unsafe attempt to load URL https://localhost:3000/img/icons.svg from origin http://localhost:3000. Domains, protocols and ports must match.
Failed to load resource: An SSL error has occurred and a secure connection to the server cannot be made.
Network tab in developers mode:
Summary
URL: https://localhost:3000/css/style.css
Status: —
Source: —
Initiator:
localhost:1
Impression:
Seems that the problem is related to SSL.
File Location
root>public>css>style.css
Example of code
app.use(express.static(path.join(__dirname, 'public')));
doctype html
html(lang='en')
head
link(rel='stylesheet' href='/css/style.css' type='text/css')
link(rel='shortcut icon' type='image/png' href='/img/favicon.png')
What has been done so far:
I googled the issue and it looks like developers experience a similar issue. I tried proposed solutions and it has not fixed the issue. <br> I switched to chrome and everything works as it should. <br>
Some examples of what has been tried:
res.set(
'Content-Security-Policy',
"default-src 'self';font-src fonts.gstatic.com;style-src 'self' 'unsafe-inline' fonts.googleapis.com"
);
style
include css/style.css
答案1
得分: 1
可能是 Safari 缓存了本地主机的 HSTS。
或者是服务器/express/helmet 预定义了它。
通过 helmet 禁用它。例如像这样：
app.use(
helmet({
hsts: false,
})
);
并在设置中清除 Safari 的缓存：隐私 -> 管理网站数据
英文:
It could be that HSTS for localhost is cached by Safari.
Or it is predefined by your server/express/helmet.
Disable it through helmet. For example like this:
app.use(
helmet({
hsts: false,
})
);
And clear Safari's cache in the Settings: Privacy -> Manage Website Data
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论