根据 CORS 预检响应中的标头“Access-Control-Allow-Headers”，标头“内容类型”是不允许的

Posted 2023-03-04

【中文标题】根据 CORS 预检响应中的标头“Access-Control-Allow-Headers”，标头“内容类型”是不允许的

【英文标题】：header ‘content-type’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response

【发布时间】：2021-03-15 12:13:19

【问题描述】：

我的问题是我无法通过 post 将数据发送到我的 api -> cors。

我已经为这个问题苦苦挣扎了好几天。到目前为止，我试图找到解决方案的尝试失败了 - 有相同问题的线程有我已经尝试过的解决方案。

这是来自控制台的错误：

根据 CORS 预检响应中的标头“Access-Control-Allow-Headers”，不允许标头“内容类型”

这是我的配置/cors.php：

'paths' => ['api/*'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => false

内核.php：

protected $middleware = [
        // \App\Http\Middleware\TrustHosts::class,
        \Fruitcake\Cors\HandleCors::class,                  <----- Cors Middleware
        \App\Http\Middleware\TrustProxies::class,
        \App\Http\Middleware\PreventRequestsDuringMaintenance::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
];

有时建议将 \Fruitcake\Cors\HandleCors::class 移动到数组中的不同位置 -> 没有结果

这是我来自 nuxt 组件的 axios 请求：

async register() 
      let config = 
        headers: 
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        ,
      
      await this.$axios
        .$post(
          '/api/v1/register',
          
            ...this.form,
            password_confirmation: this.form.password,
          ,
          config
        )
        .then(() => 

我是 API 的初学者，并不真正理解导致 CORS 错误的点。 如果是 Laravel 或 Nuxt 的问题。

我已经尝试将所需的标头（如各种帖子中的建议）添加到公共文件夹中的 routes/api.php 和 index.php 以及 .htaccess 中的外部，但没有成功。当然不是同时...

希望任何人都可以帮助我。

【参考方案1】：

如果您将 JSON 对象作为第二个参数传递给 axios.post 方法，axios 会自动为您将其序列化为 JSON。它还将设置 Content-Type 标头。

尝试删除您的显式标头声明。

async register() 
  await this.$axios
    .$post(
      '/api/v1/register',
      
        ...this.form,
        password_confirmation: this.form.password,
      )
      .then(() => )

【讨论】：

感谢您阅读我的问题。我删除了标头参数，但响应没有改变 - 仍然出现 CORS 错误

是不是完全一样的错误，指的是内容类型标头？

我一直在研究这个。你用的是什么版本的 laravel？