How can I resolve a 405 (Method Not Allowed) error on fetch call from vuejs2 component?

Question

I have a laravel 7.3 project that using vuejs 2. I have a fetch call in a vuejs2 component and it works fine on WSL development server. But when I deploy the project on a local server I have a 405 (Method Not Allowed) error.

The route on routes/web.php is correctly defined with post :

Route::post('/schemas-by-elements', 'Schemas\ToolsController@byElements')
    ->name('schemas.by.elements')
    ->middleware(['permission:projects.full']);

The function that is calling the route with fetch on a vuejs2 component :

        updateSchemasByElementsResults:function(){
            if(this.filters.length > 0) {
                this.isLoading = true;
                let link = this.link.schemasByElements+'/';
                return fetch(link, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content'),
                    },
                    body: JSON.stringify(this.filters),
                })
                .then((response) => {
                    return response.json();
                })
                .then((body) => {
                    this.byElementsResults = body[0];
                    this.resultsCount = body[1];
                    this.toggleLoader();
                    return this.byElementsResults;
                })
            } else {
                this.byElementsResults = [];
                this.resultsCount='';
            }
        },

I can see on the console that it's calling the get method :

GET http://xxx.xxx.x.xxx/schemas-by-elements 405 (Method Not Allowed)

I verify the .htaccess file and it seems right :

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Send Requests To Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

Do you have any idea why it doesn't work on local server?

EDIT

It seems that my fetch request is redirected with 301 redirection :

xxx.xxx.x.xx1 - - [30/Nov/2023:12:32:14 +0100] "POST /schemas-by-elements/ HTTP/1.1" 301 603 "http://xxx.xxx.x.xxx/schemas/create" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36"
xxx.xxx.x.xx1 - - [30/Nov/2023:12:32:14 +0100] "GET /schemas-by-elements HTTP/1.1" 405 1045 "http://xxx.xxx.x.xxx/schemas/create" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36"

I haven't this redirection in wsl development server so I think that it's due to server configuration. Where it can be configured?

Answer 1

It were these lines which cause the problem :

let link = this.link.schemasByElements+'/';

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} (.+)/$
RewriteRule ^ %1 [L,R=301]

My request ends with '/' so the htaccess configuration redirects it to the same url with a GET request. My route is configure to accept only POST request so it throw the 405 error.

I delete the +'/' from my url and it works fine now.