Subdomain routing returns into Access-Control-Allow-Origin Error

[p4rad0xus]

• Laravel Version: 10.22.0
• PHP Version: 8.2.10
• Splade JS Version (npm): 1.4.16
• Splade PHP Version (composer): 1.4.16
• Dev environment (OS, Sail/Valet/etc): Sail

Description:

I want to use a subdomain routing in my app. To do so I used the code in the Laravel documentation. If I click the link to the site I get the following error messages:

[Error] Origin http://localhost is not allowed by Access-Control-Allow-Origin. Status code: 200
[Error] XMLHttpRequest cannot load http://intern.localhost/behind due to access control checks.

In a normal Laravel project I had tested the same and it's worked.

Steps To Reproduce Issue:

In the web.php file I add the following route:

Route::domain('sub.' . env('APP_URL'))->group(function () {
        Route::get('subpage', fn () => view('subpage'))->name('subpage');
    });

The new page is linked in the home.blade.php file with a Link tag:

<x-layout>
    <x-slot name="header">
        {{ __('Home') }}
    </x-slot>

    <x-panel class="flex flex-col items-center pt-16 pb-16">
        <x-application-logo class="block h-12 w-auto" />

        <div class="mt-8 text-2xl">
            Welcome to your Splade application!
        </div>
        <Link href="{{route('subpage')}}">Behind</Link>
    </x-panel>
</x-layout>

[dusp2k]

I don't think this is Splade related. Can you check your CORS settings in config/cors.php.

[p4rad0xus]

I also wonder where I made the mistake. Unfortunately, I don't know much about this area and haven't been able to find the right point online.

This is the content of cors.php

<?php

return [

    'paths' => ['api/*', 'sanctum/csrf-cookie'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

];

[dusp2k]

That content seems ok.

If you just want to switch to another domain you can try the away attribute on the Link

[p4rad0xus]

The solution with the keyword away works but does not solve the original problem.

I set up a new Splade project for testing. I use Laravel Sail as the environment. Here I have only made the following adjustments.

In web.php I added the route to the blade file.

Route::domain('admin.' . config('app.url'))->group(function () {
        Route::view('/admin', 'admin')->name('admin');
    });

The link has been added to home.blade.php.

<x-layout>
    <x-slot name="header">
        {{ __('Home') }}
    </x-slot>

    <x-panel class="flex flex-col items-center pt-16 pb-16">
        <x-application-logo class="block h-12 w-auto" />

        <div class="mt-8 text-2xl">
            Welcome to your Splade application!
        </div>
        <Link href="{{route('admin')}}">Admin</Link>
    </x-panel>
</x-layout>

The admin.blade.php file has been created.

<x-layout>
    <x-slot name="header">
        {{ __('Admin') }}
    </x-slot>

    <x-panel class="flex flex-col items-center pt-16 pb-16">
        <x-application-logo class="block h-12 w-auto" />

        <div class="mt-8 text-2xl">
            Admin Page
        </div>
    </x-panel>
</x-layout>

To ensure that Vite functions correctly in the environment, the “server” section has been added to vite.config.js.

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

export default defineConfig({
    plugins: [
        laravel({
            input: "resources/js/app.js",
            ssr: "resources/js/ssr.js",
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    ssr: {
        noExternal: ["vue", "@protonemedia/laravel-splade"],
    },
    server: {
        host: "0.0.0.0",
        hmr: {
            host: "localhost",
        },
    },
});

In the hosts file I add the configuration for the subdomain. 127.0.0.1 admin.localhost

If I click on the link the console prompt the following messages.

In this example I didn't change much and still it doesn't work.

If I do the same changes except the changes in the vite.config.js file in a blank Laravel Sail project it works.