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

Posted 2023-02-22

【中文标题】由于 CORS 问题，无法在 Angular 中发出 HttpClient 发布请求

【英文标题】：Unable to make HttpClient post request in Angular because of CORS issue

【发布时间】：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 请求？我的代码有什么问题，我该如何解决？

【问题讨论】：

相关：***.com/questions/5750696/…

它看起来（在非工作版本中）服务器没有正确响应 OPTIONS 预检请求，您的浏览器将在 之前 实际 @ 987654330@请求。

推荐这个github.com/barryvdh/laravel-cors insted 中间件

您好，@Wai Yan Hein，但我之前遇到了同样的错误。此中间件适用于不适用于预检标头的方法。小妞这个***.com/questions/34748981/…

@vishalpardeshi。你说的对。我之前使用的中间件无法正常工作。当我使用你的时，现在每个都在工作。非常感谢。

【参考方案1】：

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

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