CORS policy `Access-Control-Allow-Private-Network` fails

[mkpoli]

This does not seems to be the same as CSP policy #1 . Can you support file @require?

好像现在 Chrome 更严了？

Chrome version: 123.0.6312.88

example.com/:1 Access to script at 'http://127.0.0.1:5134/__vite-plugin-monkey.entry.js' from origin 'https://example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Private-Network' header was present in the preflight response for this private network request targeting the `local` address space.

userscript.html?name=server%253Amonkey-project.user.js&id=2b7fb4eb-e66d-4391-9d9c-5b6de9d2af2a:60 
GET http://127.0.0.1:5134/__vite-plugin-monkey.entry.js net::ERR_FAILED

[mkpoli]

Current temporary solution 1:

Disable CORS in Chrome

Current temporary solution 2:

Use file-based approach (Need manual refresh)

import { defineConfig } from 'vite';
import monkey from 'vite-plugin-monkey';
export default defineConfig({
  plugins: [
    monkey({
      entry: 'src/main.ts',
      server: {
        open: false,
      },
      userscript: {
        icon: 'https://vitejs.dev/logo.svg',
        namespace: 'npm/vite-plugin-monkey',
        match: ['https://example.com/'],
      },
    }),
  ],
});

// ==UserScript==
// @name         Monkey
// @namespace    http://tampermonkey.net/
// @version      2024-04-04
// @match        https://example.com/
// @grant        none
// @require      file://C:/Users/User/Desktop/monkey-project/dist/monkey-project.user.js
// ==/UserScript==

vite build --watch

[lisonge]

[andywang425]

I have the same version of chrome as you do, but everything works fine in dev mode. Testing under Tampermonkey 5.0.1 with default settings.

[lisonge]

没看懂你想表达什么，如何复现你说的这个错误？

---

Access-Control-Allow-Private-Network 相关的错误只需要设置 server 的 Access-Control-Allow-Private-Network 响应头的值为 true 即可让浏览器继续请求

import { defineConfig } from 'vite';
import monkey from 'vite-plugin-monkey';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        {
            name: 'set-headers',
            apply: 'serve',
            configureServer(server) {
                server.middlewares.use((req, res, next) => {
                    res.setHeader(
                        'Access-Control-Allow-Private-Network',
                        'true'
                    );
                    next();
                });
            },
        },
        monkey({
            entry: 'src/main.ts',
            userscript: {
                icon: 'https://vitejs.dev/logo.svg',
                namespace: 'npm/vite-plugin-monkey',
                match: ['https://example.com/'],
            },
        }),
    ],
});

[mkpoli]

Access-Control-Allow-Private-Network 相关的错误只需要设置 server 的 Access-Control-Allow-Private-Network 响应头的值为 true 即可让浏览器继续请求

import { defineConfig } from 'vite';
import monkey from 'vite-plugin-monkey';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        {
            name: 'set-headers',
            apply: 'serve',
            configureServer(server) {
                server.middlewares.use((req, res, next) => {
                    res.setHeader(
                        'Access-Control-Allow-Private-Network',
                        'true'
                    );
                    next();
                });
            },
        },
        monkey({
            entry: 'src/main.ts',
            userscript: {
                icon: 'https://vitejs.dev/logo.svg',
                namespace: 'npm/vite-plugin-monkey',
                match: ['https://example.com/'],
            },
        }),
    ],
});

谢谢，用这个方法解决了。我以为不是Vite服务器端的错误，而是Chrome就不让在别的地方执行localhost，原来是localhost的Header问题。看来是我孤陋寡闻了。

但是我很好奇为什么我以前用的时候没事，而且其他人也没事……。留这个Issue以供后人研究。