React 应用程序和 Laravel API 的 CORS 问题

Question

我有一个 React 应用程序，位于 http://localhost:3000/ Laravel API 位于 http://localhost/blog/public/api/
我收到以下错误

CORS 策略已阻止从源“http://localhost:3000”获取“http://localhost/blog/public/api/auth/signin”的访问权限：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

这里是响应头：-

我通过 htaccess 尝试过， https://packagist.org/packages/barryvdh/laravel-cors

Answer 1

以下解决方案应该可以解决 Laravel 中与 CORS 相关的问题。

第一步：创建一个新的中间件

‘Php artisan make:middleware cors’

第 2 步：

将下面的内容放在创建的中间替换句柄方法

    public function handle($request, Closure $next) {
   
    return $next($request)
      ->header('Access-Control-Allow-Origin', '*')
      ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
      ->header('Access-Control-Allow-Headers',' Origin, Content-Type, Accept, Authorization, X-Request-With')
      ->header('Access-Control-Allow-Credentials',' true');
}

第 3 步：

然后转到 Kernel.php 文件并将其添加到应用程序的全局 HTTP 中间件堆栈下。

附言仅添加了带有注释的最后一行，其他行之前存在。

protected $middleware = [
\Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class,
\Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
\App\Http\Middleware\TrimStrings::class,
\Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
\App\Http\Middleware\TrustProxies::class,
\App\Http\Middleware\Cors::class,//cors added here 
 ];

享受吧！

Answer 2

Laravel 7 通过 Barry 的 package 支持开箱即用的 CORS

否则使用这个composer require fruitcake/laravel-cors安装包

然后发布配置php artisan vendor:publish --tag="cors"

然后根据需要进行修改。

这是一个工作配置（小心，这允许来自其他来源的每个请求）：

<?php

return [
    /*
    |--------------------------------------------------------------------------
    | Laravel CORS Options
    |--------------------------------------------------------------------------
    |
    | The allowed_methods and allowed_headers options are case-insensitive.
    |
    | You don't need to provide both allowed_origins and allowed_origins_patterns.
    | If one of the strings passed matches, it is considered a valid origin.
    |
    | If array('*') is provided to allowed_methods, allowed_origins or allowed_headers
    | all methods / origins / headers are allowed.
    |
    */

    /*
     * You can enable CORS for 1 or multiple paths.
     * Example: ['api/*']
     */
    'paths' => ['api/*'],

    /*
    * Matches the request method. `[*]` allows all methods.
    */
    'allowed_methods' => ['*'],

    /*
     * Matches the request origin. `[*]` allows all origins.
     */
    'allowed_origins' => ['*'],

    /*
     * Matches the request origin with, similar to `Request::is()`
     */
    'allowed_origins_patterns' => [],

    /*
     * Sets the Access-Control-Allow-Headers response header. `[*]` allows all headers.
     */
    'allowed_headers' => ['*'],

    /*
     * Sets the Access-Control-Expose-Headers response header.
     */
    'exposed_headers' => false,

    /*
     * Sets the Access-Control-Max-Age response header.
     */
    'max_age' => false,

    /*
     * Sets the Access-Control-Allow-Credentials header.
     */
    'supports_credentials' => true,
];

Answer 3

在 Laravel 中访问 API 时不会出现 CORS 错误，那么您需要在 Laravel 项目中添加 CORS PKG。

https://github.com/barryvdh/laravel-cors

您可以使用它来修复此错误。

Answer 4

您遇到的错误是由于您的资源（您的 Laravel API）上未设置 CORS 政策标头。
我知道您知道barryvdh's cors package，您能否检查一下您是否遵循了该软件包的安装过程？

更具体地说，在您的 Http/Kernel.php 文件中包含以下内容：

protected $middleware = [
    // ...
    \Barryvdh\Cors\HandleCors::class,
];

或

protected $middlewareGroups = [
    'web' => [
       // ...
    ],

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

第一个将中间件全局注入到您的应用中，第二个将中间件注入到 api 防护中，如果您在 routes/api.php 中定义了您的 api 路由，它应该也可以工作。

---

此外，您可以尝试使用php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider" 发布包的配置并将允许的标头更改为'allowedHeaders' => ['*'],

Answer 5

如果你使用 CRA(create-react-app)，你可以在 react 应用程序中启用 CORS。您需要在 src 文件夹中添加 setupProxy.js 文件。

const proxy =  require("http-proxy-middleware");
module.exports = (app) => {
  app.use(
    "/api/",
    proxy({
      target: "https://target.com/",
      changeOrigin: true,
      pathRewrite: {
        "^/api/": "/"
      },
    })
  );
};