Vue.js 2组件Fetch请求405错误：Laravel部署后问题排查

问题描述 #

基于Laravel 7.3 + Vue.js 2的项目，WSL开发环境中Vue组件的Fetch请求正常，但部署到本地Apache服务器后出现405（Method Not Allowed）错误。

相关配置代码 #

• Laravel路由（routes/web.php）：

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

• Vue组件中的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='';
    }
},

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

错误现象 #

控制台显示实际发起的是GET请求，服务器日志显示POST请求被301重定向后转为GET：

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"

问题原因与解决方案 #

核心原因 #

Apache通过.htaccess中的规则，对带末尾斜杠的非目录请求进行301永久重定向。而浏览器在处理POST请求的301重定向时，会自动将请求方法改为GET，导致原本的POST请求变成GET请求，触发Laravel路由的405错误（因为该路由仅允许POST）。

WSL开发环境使用Laravel内置服务器，其路由匹配逻辑允许URL带或不带末尾斜杠，不会触发重定向，因此无此问题。

解决方案 #

1. 移除请求URL末尾的斜杠（推荐）

修改Vue组件中的URL拼接代码，去掉手动添加的末尾斜杠：

// 原代码
let link = this.link.schemasByElements+'/';
// 修改后
let link = this.link.schemasByElements;

2. 使用Laravel路由生成正确URL（更稳妥）

避免手动拼接URL，直接在后端生成正确的路由地址并传递给前端：

• 在Blade模板中全局注入路由URL：

<script>
window.routeUrls = {
    schemasByElements: "{{ route('schemas.by.elements') }}"
};
</script>

• Vue组件中直接使用该变量：

let link = window.routeUrls.schemasByElements;

3. 调整.htaccess重定向规则（可选）

如果无法修改前端代码，可修改.htaccess中的重定向规则，仅对GET请求处理末尾斜杠，避免POST请求被重定向：

# 仅对GET请求重定向末尾斜杠
RewriteCond %{REQUEST_METHOD} GET
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} (.+)/$
RewriteRule ^ %1 [L,R=301]

内容的提问来源于stack exchange，提问作者Petitemo