权限策略标头错误：无法识别的功能：“兴趣群组”

Question

我才刚刚开始反应。

我的页面在本地主机上运行良好。

现在我正在尝试在 github 上托管我的页面。

我使用了“npm run deploy”并托管

这是我的package.json

现在，当我尝试访问我的页面时，我遇到了错误，第一个警告最让我担心。

这是我的页面：Github 页面

这个“权限策略”是什么以及如何修复它？

Answer 1

基本上可以忽略它。 GitHub 托管页面禁用 FLoC，这是 Google 的第 3 方 cookie 替代方案。 GitHub、微软似乎不太喜欢。

https://github.blog/changelog/2021-04-27-github-pages-permissions-policy-interest-cohort-header-added-to-all-pages-sites/

Answer 2

我知道有点晚了。但我会将其保留在这里，因为我没有看到如何解决此问题的答案。 所以我们基本上只需要在

<meta>

文件上添加这个

index.html

标签即可：

<meta http-equiv="Permissions-Policy" content="interest-cohort=()">

Answer 3

没有人真正解决回复中的其他错误。问题是你的 CSS 和 JS 文件的链接是错误的。

这就像（如果您检查网络）或检查index.html 文件。

https://USERNAME.github.io/assets/index-97b0971f.css

并且它上面应该有 repository 名称。因此正确的链接应该是：

https://USERNAME.github.io/REPOSITORY/assets/index-97b0971f.css

如果您使用一些“前端工具”，例如

Vite.js

，您应该转到

vite.config.js

并添加属性

base

，如下例所示：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  base: "/tweak/",
 //...whatever you had here remains the same
});

Answer 4

我解决了这个问题，在 app.js 中使用“精确”一词和路线 然后部署它。

看看你的路径将会改变，所以你也可以将你的家乡路线的路径更改为在我的情况下精确的 /mvp...

  return <BrowserRouter>
<div className="App">
<Routes>
     
    <Route exact path="/" element={ <Home /> } />
    <Route exact path="startcreating" element={ <Start /> } />
    <Route exact path="aboutus" element={ <About /> } />
    {/* <Route path="signup" element={ <SignUpModel /> } /> */}
</Routes> 
</div>
</BrowserRouter>;

Answer 5

基本名称={process.env.PUBLIC_URL}
将此属性添加到index.js文件中的BrowserRouter。

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter basename={process.env.PUBLIC_URL}>
    <App />
  </BrowserRouter>
);

Answer 6

我不知道这是完成这项任务的好方法。但我注意到我的index.html 文件中的路径是绝对路径。当我将它们更改为相关的（即 /assets 到 ./assets）时，它起作用了。