Laravel API CORS Localhost 问题 - PHP

问题描述

在学习 Laravel API 开发时，可能会遇到在本地开发环境中使用 AJAX 请求时出现跨域问题（CORS）。这会导致请求被拒绝并在控制台中显示以下错误信息：

Access to XMLHttpRequest at 'http://localhost:8000/api/...' from origin 'http://localhost:3000' has been blocked by CORS policy

问题原因

这是由于浏览器出于安全原因阻止了从不同源（域名、端口或协议）发送的 AJAX 请求。由于在本地开发环境中通常会使用不同的端口号，因此会导致这种跨域问题。

解决方案

有几种方法可以解决这个问题：

方法一：使用 Laravel 的 CORS 包

在 Laravel 中使用 barryvdh/laravel-cors 包可以轻松地处理跨域请求。首先，我们需要使用 Composer 安装此包：

composer require barryvdh/laravel-cors

然后，将 CorsMiddleware 中间件添加到中间件组中（例如 web 或 api 中间件组）：

// app/Http/Kernel.php

protected $middlewareGroups = [
    'web' => [
        // ...
        \Barryvdh\Cors\HandleCors::class,
    ],

    'api' => [
        // ...
        \Barryvdh\Cors\HandleCors::class,
    ],
];

最后，您可以自定义配置文件以更改默认的跨域选项（例如允许哪些来源等）。有关更多信息，请参阅官方文档。

方法二：设置 CORS 标头

如果您不想使用 Laravel 的 CORS 包，可以手动设置 CORS 标头以允许 AJAX 请求。在 Laravel 控制器或路由中添加以下代码即可：

// Laravel 控制器或路由

header('Access-Control-Allow-Origin: http://localhost:3000');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE');
header('Access-Control-Allow-Headers: Authorization, Content-Type');

这将允许来自 http://localhost:3000 的跨域请求，并允许使用的 HTTP 方法和自定义标头。

方法三：使用代理

如果您使用像 webpack-dev-server 这样的开发服务器来运行前端应用程序，则可以使用代理来绕过跨域问题。此方法需要在前端开发服务器配置中进行设置。例如，对于 webpack-dev-server，您可以在 webpack 配置文件中添加以下代码：

// webpack 配置文件

devServer: {
    proxy: {
        '/api': {
            target: 'http://localhost:8000',
            pathRewrite: { '^/api': '' },
            changeOrigin: true,
        },
    },
},

这会将所有以 /api 开头的请求代理到 http://localhost:8000。在 Laravel 中，您可以将 API 路由前缀设置为 /api 以与此配置匹配。

结论

以上是几种解决 Laravel API 在本地开发环境中的 CORS 跨域问题的方法。您可以选择使用 Laravel 的 CORS 包，手动设置 CORS 标头或使用代理来解决此问题。请根据您的需求和偏好选择适合您的解决方案。