如何解决从 vuejs2 组件进行 fetch 调用时出现的 405（方法不允许）错误？

Question

我有一个使用 vuejs 2 的 laravel 7.3 项目。 我在 vuejs2 组件中有一个 fetch 调用，它在 WSL 开发服务器上运行良好。 但是当我在本地服务器上部署项目时，出现 405（方法不允许）错误。

routes/web.php 上的路由已使用 post 正确定义：

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

在 vuejs2 组件上使用 fetch 调用路由的函数：

        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='';
            }
        },

我可以在控制台上看到它正在调用 get 方法：

GET http://xxx.xxx.x.xxx/schemas-by-elements 405（不允许的方法）

我验证了 .htaccess 文件，它看起来是正确的：

<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>

你知道为什么它在本地服务器上不起作用吗？

编辑

看来我的 fetch 请求被 301 重定向重定向了：

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"

我在 wsl 开发服务器中没有此重定向，所以我认为这是由于服务器配置造成的。哪里可以配置？

Answer 1

正是这些行导致了问题：

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

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

我的请求以“/”结尾，因此 htaccess 配置将其重定向到带有 GET 请求的相同 URL。 我的路由配置为仅接受 POST 请求，因此会抛出 405 错误。

我从我的网址中删除了

+'/'

，现在工作正常。