Question

我正在使用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

我在线尝试了很多解决方案。例如，使用“application-json”传递标题为“Content-Type”，依此类推。他们都没有帮助。我已经在服务器端解决了CORS问题。

但是当我将身体发送为字符串时，请求正在运行

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

    })

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

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

Answer 1

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

建议在项目中使用github.com/barryvdh/laravel-cors 而不是中间件。

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

1 个答案: