CORS issue when trying to make shop page with vue js using proxy

[agafonec]

Hi There,
I'm having issue trying to page inside the shop theme using proxy. regular blade templates or plain html works fine, but when i'm trying to put rendered content of vue js i get bunch of CORS errors.

that's the code i'm using for rendering content on proxy endpoint

    public function view(Request $request)
    {
        $request->headers->set('Access-Control-Allow-Origin', '*');
        $request->headers->set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
        $request->headers->set('Access-Control-Allow-Headers', 'Content-Type, Authorization');


        $content = Inertia::render('ShopifyClient/ReturnForm')
            ->toResponse($request)
            ->getContent();
        
        return Response::make(
            $content,
            200,
            [
                'Content-Type' => 'application/liquid',
                'Access-Control-Allow-Origin' => '*'
            ]
        );
    }

also tried to add headers with custom middleware

but it's not helping at all. any ideas what's wrong or how can this issue be fixed?

[Kyon147]

This looks like a vite CORS issue for your dev server to the application.

Try adding this to your vite config - this allows the vite server to accept the cross domain requests between Shopify and the local dev server.

    server: {
        origin: "http://localhost:5173", // Ensure the correct Vite URL
        cors: true, // Allow cross-origin requests
        hmr: {
            host: "localhost",
        },
    },