search

vuejs / devtools

⚙️ Browser devtools extension for debugging Vue.js applications.
https://devtools.vuejs.org/
MIT License
1.71k stars 121 forks source link

Vite integration iframe content fetch connection refused with Cross Origin Embedder Policy applied #565

Open abiari opened 3 months ago

abiari commented 3 months ago

I have Cross Origin Embedder/Opener policies headers set to enable sharedArrayBuffer access. If i remove the Cross Origin headers, the devtools works as expected.

code

Dev tools attempt to fetch the entry html file fails.

Screenshot from 2024-08-07 16-25-08

Screenshot from 2024-08-07 16-24-11

alexzhang1030 commented 3 months ago

When you set this header, the devtools floating panel(embedded in the page as an iframe) will be refused to load by the browser. If you need that, you can use localhost:3000/__devtools__/ separate window.

nighca commented 3 days ago

@abiari I made a PR (#710) to fix this.

When you set this header, the devtools floating panel(embedded in the page as an iframe) will be refused to load by the browser.

@alexzhang1030 The blockage can be avoided by applying the same headers to the devtools page response as those on the application page, which can be configured using server.headers in the Vite config.