Laravel 10 API跨域问题：请求缺少Access-Control-Allow-Origin头

核心问题分析 #

你遇到的问题是Laravel CORS配置看似正确但未生效，原因集中在配置错误、中间件未启用、缓存未清除或其他拦截因素这几个方向，逐一排查解决如下：

1. 修正CORS配置文件的错误 #

你的config/cors.php中paths字段配置有误：paths指定的是API端需要应用CORS策略的路径，而非前端源地址。移除多余的http://localhost:19000，正确配置如下：

return [
    'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['GET', 'POST', 'PUT', 'DELETE'],
    'allowed_origins' => ['*'],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => false,
];

2. 确认CORS中间件已注册到API路由组 #

打开app/Http/Kernel.php，检查$middlewareGroups['api']中是否包含HandleCors中间件：

protected $middlewareGroups = [
    'web' => [
        // ... 其他web中间件
    ],

    'api' => [
        \Illuminate\Http\Middleware\HandleCors::class, // 确保这一行存在
        \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
        'throttle:api',
        \Illuminate\Routing\Middleware\SubstituteBindings::class,
    ],
];

3. 清除Laravel配置缓存 #

修改CORS配置后，必须清除配置缓存才能让新规则生效，执行以下Artisan命令：

php artisan config:clear
php artisan cache:clear

生产环境可额外执行php artisan config:cache生成新缓存，开发环境仅需清除即可。

4. 排查其他拦截因素 #

• CSRF中间件干扰：确保API路由定义在routes/api.php中（api路由组默认排除CSRF验证）；若路由在web.php中，需在app/Http/Middleware/VerifyCsrfToken.php的$except数组中添加API路径。
• 服务器层面拦截：如果Laravel部署在Nginx/Apache上，检查服务器配置是否存在add_header Access-Control-Allow-Origin规则，若有需与Laravel配置保持一致，或直接注释让Laravel中间件处理。
• Ngrok源地址验证：在API控制器中打印request()->header('Origin')，确认Laravel是否正确接收到前端的源地址，排除Ngrok转发导致的头信息丢失问题。

5. 修复React代码语法错误 #

你的useProductFetch.js存在语法错误，会导致请求无法正常触发，修正后的示例代码：

import { useState, useEffect } from "react";
import axios from "axios";

const useProductFetch = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [products, setProducts] = useState([]);
  const [error, setError] = useState(null);

  const fetchData = async () => {
    setIsLoading(true);
    try {
      const response = await axios.get(
        "https://0748-102-146-2-29.ngrok-free.app/api/products-api"
      );
      setProducts(response.data.data);
      console.log("Axios request successful");
    } catch (err) {
      setError(err.message);
      console.error("Request failed:", err);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  return { isLoading, products, error };
};

export default useProductFetch;

验证方法 #

修改完成后重启Laravel服务，在浏览器控制台查看请求响应头，确认是否包含Access-Control-Allow-Origin: *（或对应前端源地址）。若仍有问题，可在HandleCors.php中间件中添加日志，验证中间件是否被执行。

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