Error with Permissions-Policy header: Unrecognized feature: 'interest-cohort'

Question

I have just started react.

My page works fine on localhost.

Now I am trying to host my page on github.

I have used "npm run deploy" and hosted

This is my package.json

Now when I am trying to access my page I run into errors and the first warning concerns me the most .

This is my page : Github Page

What is this "Permission Policy" and how do I fix it?

Answer 1

Basically you can ignore it. GitHub hosted pages disable FLoC, which is Google's 3rd party cookie alternative. GitHub, Microsoft, doesn't seems to like it.

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

Answer 2

I know it is a little bit late. But I'll keep this here as I don't see an answer on how to fix this problem. So we basically just need to add this <meta> tag on index.html file:

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

Answer 3

No one actually addressed the other errors in the responses. The problem is that your links to the CSS and JS files are wrong.

It is something like (if you inspect the network) or check the index.html file.

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

and it should have the repository name on it. Therefore the correct link should be:

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

If you are using some "frontend tooling" like Vite.js you should go to the vite.config.js and add the property base like the example below:

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

I solved this issue use "exact" word with routes in app.js then deploy it.

have a look your path will be change so you can also change your path of your home route to exact /mvp in my case...

  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>;