由于 CORS 问题，无法在 Angular 中发出 HttpClient 发布请求答案

【问题标题】：Unable to make HttpClient post request in Angular because of CORS issue由于 CORS 问题，无法在 Angular 中发出 HttpClient 发布请求
【发布时间】：2018-09-18 17:58:02
【问题描述】：

我正在使用 Angular 开发一个 Web 应用程序。后端 API 是使用 Laravel PHP 框架开发的。我启用了 CORS 访问，在 Laravel 中创建了一个中间件。

这是 Laravel 中间件

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        return $next($request)
        ->header('Access-Control-Allow-Headers','X-Requested-With,content-type')
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    }
}

我可以像这样成功发出 GET 请求。

this.http.get<IEvent[]>(this.globals.API_ENDPOINT + "event/list?email=" + email).subscribe(data=> {
    //do something with the data
});

上面的 GET 请求工作正常。但问题在于使用一些参数发出 POST 请求。

我这样发送 POST 请求。

var formData = {
   name: "My name"
}
this.http.post<ISimpleForm>(this.globals.API_ENDPOINT + "event/post", formData).subscribe(data=>{

})

如您所见，formData 变量是对象。当我发送请求时，我在控制台中收到此错误。

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin

我在网上尝试了很多解决方案。例如，将带有“Content-Type”的标头与“application/json”传递等等。他们都没有帮助。我已经解决了服务器端的 CORS 问题。

但是当我将正文作为这样的字符串发送时，请求正在工作

this.http.post<ISimpleForm>(this.globals.API_ENDPOINT + "event/post", formData).subscribe(data=>{

    })

当我对正文进行字符串化时，CORS 错误消失了。但问题是当我使用 $_POST 在服务器端记录请求数据时，没有任何内容传递给请求。所以身体是空的。

那么，我如何在 Angular 中使用 HttpClient 使用一些请求参数发出 post 请求？我的代码有什么问题，我该如何解决？

【问题讨论】：

相关：stackoverflow.com/questions/5750696/…
它看起来（在非工作版本中）服务器没有正确响应 OPTIONS 预检请求，您的浏览器将在之前实际 @ 987654330@请求。
推荐这个github.com/barryvdh/laravel-cors insted 中间件
您好，@Wai Yan Hein，但我之前遇到了同样的错误。此中间件适用于不适用于预检标头的方法。小妞这个stackoverflow.com/questions/34748981/…
@vishalpardeshi。你说的对。我之前使用的中间件无法正常工作。当我使用你的时，现在每个都在工作。非常感谢。

标签： php angular laravel cors httpclient

【解决方案1】：

不久前我遇到了同样的错误。此中间件适用于不适用于预检标头的方法。检查这个Laravel 5.2 CORS, GET not working with preflight OPTIONS

建议将此用于您的项目github.com/barryvdh/laravel-cors 而不是中间件。

【讨论】：