Js and Css assets are not loading - ERR_BLOCKED_BY_CLIENT / Referrer Policy: strict-origin-when-cross-origin #47

fylzero · 2022-06-30T15:43:55Z

Laravel Vite Plugin Version: 0.2.4
Laravel Version: 9.19.0
Node Version: 17.8.0
NPM Version: 8.5.5

Description:

Ran VIte shift on a couple small applications and both apps are not loading the front end (just a blank white page). app.css and app.js are not loading due to ERR_BLOCKED_BY_CLIENT / Referrer Policy: strict-origin-when-cross-origin. Also worth noting I am running Valet to serve locally.

Steps To Reproduce:

Upgrade Laravel Jetstream/Inertia app to use Vite

fylzero · 2022-07-01T00:24:28Z

@timacdonald I added that to my vite.config.js and it did not resolve the issue. I'm visiting the Valet URL and it is requesting assets via https://localhost:3000/ and throwing a strict-origin-when-cross-origin / GET https://localhost:3000/resources/css/app.css net::ERR_BLOCKED_BY_CLIENT error.

Here is my vite.config.js

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    server: {
        https: true,
        host: 'localhost',
    },
    plugins: [
        laravel(['resources/css/app.css', 'resources/js/app.js']),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
})

timacdonald · 2022-07-01T00:25:59Z

@fylzero we are gonna look into this for you today. I misread the issue initially I'm sorry.

fylzero · 2022-07-01T00:27:37Z

@timacdonald No problem, thanks for assisting. Not sure this is necessarily an issue with the plugin but I ran into this with two apps so I'd like to know what is causing it. Excited to switch these to Vite.

fylzero · 2022-07-01T00:52:18Z

I've also walked through the documentation and moved my CSS import to javascript and replaced my resolve/require statement with resolvePageComponent. Still having the same resulting error on my javascript. strict-origin-when-cross-origin / ERR_BLOCKED_BY_CLIENT

timacdonald · 2022-07-01T02:40:27Z

Hey @fylzero, we've tried to replicate this but haven't been able to locally.

Are you able to create a new Laravel project and replicate the issue? If so, could you do that and create a GitHub repository that we could pull down and test.

A few other things that might be useful to know:

When you initially hit the issue, was the site running as "secured"?
What version of Valet are you running (valet --version)?
What web browser are you running?
What happens when you access the CSS directly via https://localhost:3000/resources/css/app.css?
What operating system are you running on?
Are you running anything in Docker?

fylzero · 2022-07-01T03:17:23Z

@timacdonald

The repo I'm attempting this on is public: https://github.com/fylzero/simran-hates-meetings - The Shift branch is shift-64898

The site is running secured in Valet.
Valet v3.1.7
Brave v1.40.107 Chromium: 103.0.5060.53 (Official Build) (arm64)
When I go to https://localhost:3000/resources/css/app.css it returns the CSS file.
Mac OS Monterey v12.4
Nope (No Docker), using Valet

timacdonald · 2022-07-01T05:33:52Z

haha. I hate meetings as well 🤣

fylzero · 2022-07-01T05:44:46Z

@timacdonald We started this a couple years ago. No one loves this project more than the person we joke about with this. Also, this is my favorite app to try bleeding edge things on, so this is perfect! 😂

timacdonald · 2022-07-01T06:10:50Z

Because I can tell how extremely critical this application is, I sent through a PR which makes the final tweaks to work with Vite. I believe it was just a few missing steps and the fact that Vite doesn't give great errors that this was a problem

fylzero/simran-hates-meetings#5

timacdonald · 2022-07-01T06:13:12Z

If it is still an issues after you merge and have a play, please let us know.

fylzero · 2022-07-01T06:14:04Z

@timacdonald Oh man! Excellent shirt! I hope you've seen "Unbearable Weight of Massive Talent" (very much worth seeing). We actually have a Cage club at work and watch all his movies together and have meetings (on company time) to discuss.

UGH! So, I merged your PR into the shift-64898 branch. Pulled the changes. I'm still getting the same blank page/error. 😭 I did composer dump-autoload, composer update, npm update, npm run dev. Same 💩 sadly. Any other thoughts on this? Sorry to be a pest.

timacdonald · 2022-07-01T06:15:41Z

That is gold! I have seen it - loved the movie heaps!!!

timacdonald · 2022-07-01T06:16:33Z

let me test some more.

timacdonald · 2022-07-01T06:18:00Z

@fylzero can you test in Firefox and confirm the issue exists there as well on your machine?

fylzero · 2022-07-01T06:19:08Z

Thank you so much for helping with this. Yeah, I don't know what is going on...

timacdonald · 2022-07-01T06:19:29Z

ahhh, i think I can replicate the issue now @fylzero

fylzero · 2022-07-01T06:20:01Z

@timacdonald It happens in FF as well.

timacdonald · 2022-07-01T06:25:52Z

Looks like the browser thinks Vite is a ad or something. I can replicate the issue and fix the issue by turning off the shields up stuff.

Might need to put localhost on an allow list or something to make this work permanently.

Let me know if that works for you.

Screen.Recording.2022-07-01.at.4.22.58.pm.mov

fylzero · 2022-07-01T06:31:11Z

@timacdonald That gets me a little further! Weird it is saying the site is "not secure" when doing that. I can try to dig into that. Thanks again for your help!

timacdonald · 2022-07-01T06:40:41Z

no troubles. Hope you enjoy Vite once you get it kicking smoothly on your end!

fylzero · 2022-07-03T12:42:28Z

@timacdonald I'm still struggling with this but have a little more information.

I tried installing a fresh copy of Laravel (composer global version and packages are up to date), running Valet (Valet is working for other apps), installed Jetstream w/ Inertia (no teams), and I'm still getting this error with no interface loading / blocked assets.

This issue is only occurring on my personal machine, not on my work machine... so something is wonky on this system. Might have to just burn my OS to the ground and start fresh. I can't think of what would cause this. Maybe it's time I switch from Valet to Sail. idk

Update: Oh wow! Even running Sail I get the same error.

Update update: Didn't realize I was not running Brave on my work machine and this stopped presenting as an issue in FF on my personal machine. So I guess the bottom line is this is weirdness with Brave and the Vite setup. That's at least super useful to know!

timacdonald · 2022-07-03T22:49:03Z

Thanks for the update @fylzero. Seems like Brave might really bring the hammer down on cross domain stuff. I'm gonna try and put some time aside to dig deeper on what we can do to make Brave play nicer with things.

timacdonald · 2022-07-03T23:49:02Z

@fylzero I've spent some time on this today and from what I can see, this is a problem in Brave and it is just how it works.

However, you can do the following.

Warning
I am providing this solution, however you should fully understand what this solution is doing as it may have further security consequences / side-effects for you. I'll give you a quick walk-through, but you should visit the docs for Brave and AdBlockPro to understand if this solution is right for you.

Open brave://adblock/ in the Brave browser. Then add the following to the "Custom Filters"...

@@||127.0.0.1^$domain=my-app.test

but replacing my-app.test with the Valet domain of your application. This should allow requests to 127.0.0.1 (the Vite server) when you visit the domain my-app.test (your valet served domain).

This rule could probably be improved to allow on all .test TLDs, but I'm not sure how to do this at this time. Happy for others to contribute to this solution to make it more well rounded.

AdBlockPro rule documentation

dissolvdgrl · 2022-07-15T13:26:42Z

I had to replace 127.0.0.1 with localhost in my case in my brave://adblock/ Custom Filters.

Tedderouni · 2022-10-27T22:04:22Z

In my case (using Vite 3.1.8), the resource URLs are under http://[::1]:5173/, so I added this rule in my brave://adblock/ Custom Filters:

@@||[::1]^$domain=my-app.test

According to the docs, multiple domains can be specified using | as the separator, so you could do something like:

@@||[::1]^$domain=my-app.test|my-other-app.test

Or, just specifying a domain of test works for me to allow any domains ending in .test. As @timacdonald mentions above, make sure to understand all security implications that may apply to you before allowing all .test domains.

@@||[::1]^$domain=test

zaynekomichi · 2023-01-02T12:41:15Z

Had Ad blocker installed apperently it was causing the site not to load the source files, use another browser and see if it works.

cariboufute · 2023-01-12T15:59:22Z

In case you haven't found it already, in Brave, you should check the URL form and click on the circled Brave ad button, as shown in screenshot. In the modal, turn the switch off. This removes the ERR_BLOCKED_BY_CLIENT error for Vite and normally, Vite works as usual.

You have to make it once for each new URL you use.

jesseleite · 2023-02-27T22:01:59Z

Open brave://adblock/ in the Brave browser. Then add the following to the "Custom Filters"...
@@||127.0.0.1^$domain=my-app.test
This rule could probably be improved to allow on all .test TLDs, but I'm not sure how to do this at this time.

@timacdonald, This seems to work well on all my valet parked .test domains...

@@||127.0.0.1^$domain=test

PS. @Tedderouni, I'm confused what your [::1] is about, but thank you for that $domain=test tip 🔥

evanstinger · 2023-03-08T06:52:20Z

In case you haven't found it already, in Brave, you should check the URL form and click on the circled Brave ad button, as shown in screenshot. In the modal, turn the switch off. This removes the ERR_BLOCKED_BY_CLIENT error for Vite and normally, Vite works as usual.

You have to make it once for each new URL you use.

Thank you, in my case, disabling Brave Shield on that .test domain solved this problem

cotiga · 2023-11-18T13:31:42Z

This is what I added in the adblock filter and it works for all sites in .test
@@||[::1]^$domain=~^.*\.test

rick-nataniel-walker · 2023-12-20T09:25:54Z

I am having this very same problem GET http://[::1]:5173/@vite/client net::ERR_BLOCKED_BY_CLIENT.
This is happening in production machine (a shared host). Now, I could notice something: the http schema isn't welcome in secure site, that's why is getting blocked.

I guess if there were a way to configure (I don't know where) vite to know the schema the app is under. I mean locally it runs http and live it runs https.

I've tried some recommendations:
server: {
https: true,
host: 'https://my-site.com/',
},
to append in vite.config.js yet it is still failing

timacdonald · 2023-12-20T21:54:31Z

@rick-nataniel-walker you should not be running the dev server in production.

You need to:

Ensure that the public/hot file has not been committed to your projects repository (it should be git ignored)
Run npm run build to create a build.

If you see references to @vite/client at all in your generated HTML on production, you have a "hot" file.

Priyank57 · 2024-01-21T06:00:13Z

Thanks @timacdonald,
I got the same issue on live server, your first point of removing hot from public folder
resolved my issue,
Now it's working fine with command

npm run build

timacdonald closed this as completed Jul 1, 2022

timacdonald reopened this Jul 1, 2022

timacdonald added the needs more info label Jul 1, 2022

timacdonald closed this as completed Jul 1, 2022

gradedcatfood mentioned this issue Jul 4, 2022

Laravel Vite requests to not load on fresh Laravel Install on Homestead #58

Closed

timacdonald mentioned this issue Oct 1, 2023

Vite + Valet + Tailwind not working with HMR #248

Closed

mpociot mentioned this issue Apr 15, 2024

[Bug]: Vite CSS not loading beyondcode/herd-community#648

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Js and Css assets are not loading - ERR_BLOCKED_BY_CLIENT / Referrer Policy: strict-origin-when-cross-origin #47

Js and Css assets are not loading - ERR_BLOCKED_BY_CLIENT / Referrer Policy: strict-origin-when-cross-origin #47

fylzero commented Jun 30, 2022 •

edited

fylzero commented Jul 1, 2022 •

edited

timacdonald commented Jul 1, 2022

fylzero commented Jul 1, 2022

fylzero commented Jul 1, 2022

timacdonald commented Jul 1, 2022 •

edited

fylzero commented Jul 1, 2022 •

edited

timacdonald commented Jul 1, 2022

fylzero commented Jul 1, 2022

timacdonald commented Jul 1, 2022 •

edited

timacdonald commented Jul 1, 2022

fylzero commented Jul 1, 2022 •

edited

timacdonald commented Jul 1, 2022

timacdonald commented Jul 1, 2022

timacdonald commented Jul 1, 2022

fylzero commented Jul 1, 2022

timacdonald commented Jul 1, 2022

fylzero commented Jul 1, 2022

timacdonald commented Jul 1, 2022

fylzero commented Jul 1, 2022

timacdonald commented Jul 1, 2022

fylzero commented Jul 3, 2022 •

edited

timacdonald commented Jul 3, 2022 •

edited

timacdonald commented Jul 3, 2022 •

edited

dissolvdgrl commented Jul 15, 2022

Tedderouni commented Oct 27, 2022

zaynekomichi commented Jan 2, 2023

cariboufute commented Jan 12, 2023

jesseleite commented Feb 27, 2023

evanstinger commented Mar 8, 2023

cotiga commented Nov 18, 2023

rick-nataniel-walker commented Dec 20, 2023

timacdonald commented Dec 20, 2023

Priyank57 commented Jan 21, 2024 •

edited

Js and Css assets are not loading - ERR_BLOCKED_BY_CLIENT / Referrer Policy: strict-origin-when-cross-origin #47

Js and Css assets are not loading - ERR_BLOCKED_BY_CLIENT / Referrer Policy: strict-origin-when-cross-origin #47

Comments

fylzero commented Jun 30, 2022 • edited

Description:

Steps To Reproduce:

fylzero commented Jul 1, 2022 • edited

timacdonald commented Jul 1, 2022

fylzero commented Jul 1, 2022

fylzero commented Jul 1, 2022

timacdonald commented Jul 1, 2022 • edited

fylzero commented Jul 1, 2022 • edited

timacdonald commented Jul 1, 2022

fylzero commented Jul 1, 2022

timacdonald commented Jul 1, 2022 • edited

timacdonald commented Jul 1, 2022

fylzero commented Jul 1, 2022 • edited

timacdonald commented Jul 1, 2022

timacdonald commented Jul 1, 2022

timacdonald commented Jul 1, 2022

fylzero commented Jul 1, 2022

timacdonald commented Jul 1, 2022

fylzero commented Jul 1, 2022

timacdonald commented Jul 1, 2022

fylzero commented Jul 1, 2022

timacdonald commented Jul 1, 2022

fylzero commented Jul 3, 2022 • edited

timacdonald commented Jul 3, 2022 • edited

timacdonald commented Jul 3, 2022 • edited

dissolvdgrl commented Jul 15, 2022

Tedderouni commented Oct 27, 2022

zaynekomichi commented Jan 2, 2023

cariboufute commented Jan 12, 2023

jesseleite commented Feb 27, 2023

evanstinger commented Mar 8, 2023

cotiga commented Nov 18, 2023

rick-nataniel-walker commented Dec 20, 2023

timacdonald commented Dec 20, 2023

Priyank57 commented Jan 21, 2024 • edited

fylzero commented Jun 30, 2022 •

edited

fylzero commented Jul 1, 2022 •

edited

timacdonald commented Jul 1, 2022 •

edited

fylzero commented Jul 1, 2022 •

edited

timacdonald commented Jul 1, 2022 •

edited

fylzero commented Jul 1, 2022 •

edited

fylzero commented Jul 3, 2022 •

edited

timacdonald commented Jul 3, 2022 •

edited

timacdonald commented Jul 3, 2022 •

edited

Priyank57 commented Jan 21, 2024 •

edited