VueJS生产环境构建后API请求404及页面冻结问题求助

问题现象 #

开发阶段两个基于API传输数据的应用运行正常，执行npm run build构建生产版本后出现异常：

• 进入API请求页面时，控制台报Failed to load resource: the server responded with a status of 404 (Not Found)
• 页面会冻结30秒
• 直接访问API URL能正常返回数据
• 尝试CORS浏览器扩展，问题未解决

相关代码 #

Vue组件的fetchData函数 #

fetchData() {
      console.log('fetching', import.meta.env.VITE_APP_ROOT_URL_TO_API + '/checklist/' + this.name);
      axios.get(import.meta.env.VITE_APP_ROOT_URL_TO_API + '/checklist/' + this.name)
          .then((response) => {
            console.log(response.data);
            this.data = response.data;

            if (this.name === 'klusjes binnen' || this.name === 'klusjes buiten') {
              this.activeAccordion = this.filteredCheckListItems.length;
              this.klusjes = true;
            }
          })
    },

.env配置 #

VITE_APP_ROOT_URL_TO_API=http://mcdo-app-desktop.test/api

PHP后端处理函数 #

public function singleChecklist($name) {
        $checkList = Checklist::where('name', $name)->with('checklistItem', 'checklistItem.listItem')->first();

        $checkList->checklistItem->each(function ($list) {

            $options = [
                "ssl" => [
                    "verify_peer"=>false,
                    "verify_peer_name"=>false,
                ]
            ];

            $list->image = base64_encode(file_get_contents(url('/') . '/storage/images/' . $list->icon_url,  false, stream_context_create($options)));
        });
        return response()->json($checkList);
    }

排查与解决方法 #

1. 验证生产环境变量注入
   构建完成后，检查静态文件中的环境变量是否被正确替换。可以直接在构建后的JS文件中搜索VITE_APP_ROOT_URL_TO_API，确认其值为http://mcdo-app-desktop.test/api，避免出现空值或错误地址导致请求路径错误。

2. 修复URL参数编码问题
   注意到请求参数this.name包含空格（如klusjes binnen），直接拼接URL会导致空格未编码，服务器无法正确解析路径。修改axios请求代码，对参数进行URL编码：

   axios.get(`${import.meta.env.VITE_APP_ROOT_URL_TO_API}/checklist/${encodeURIComponent(this.name)}`)
   

3. 检查后端路由与服务器配置

   • 确认Laravel路由定义正确，能匹配带特殊字符的参数：

     Route::get('/checklist/{name}', [ChecklistController::class, 'singleChecklist']);
     

   • 检查生产服务器（Nginx/Apache）配置，确保允许URL中的空格或特殊字符，避免服务器直接返回404。

4. 解决后端超时导致页面冻结
   页面冻结30秒大概率是后端请求超时。后端代码中使用file_get_contents通过HTTP请求获取本地图片，生产环境中可能因网络配置、HTTPS问题导致请求阻塞，进而拖慢整个API响应。

   • 改用本地文件路径直接读取，避免HTTP请求：

     // 替换url('/')为本地存储路径
     $imagePath = storage_path("app/public/images/{$list->icon_url}");
     $list->image = base64_encode(file_get_contents($imagePath));
     

   • 给file_get_contents添加超时限制，避免长时间阻塞：

     $context = stream_context_create([
         'ssl' => [
             'verify_peer' => false,
             'verify_peer_name' => false,
         ],
         'http' => [
             'timeout' => 5, // 设置5秒超时
         ]
     ]);
     $list->image = base64_encode(file_get_contents($url, false, $context));
     

5. 确认生产环境CORS配置
   虽然直接访问API正常，但前端生产构建后可能存在跨域场景差异。检查Laravel的config/cors.php配置，确保允许生产环境前端域名的跨域请求，并且配置正确的请求方法和头信息。

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