2018-04-09 10:49
浏览 335

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

I am developing a Web application using Angular. Backend API is developed using Laravel PHP framework. I enabled the CORS access creating a middleware in the Laravel.

This is the Laravel middleware

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-Origin', '*')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');

I can successfully make the GET request like this.

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

The above GET request is working fine. But the problem is with making POST request with some parameters.

I send the POST request like this.

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


As you can see the formData variable is object. When I send the request, I got this error in console.

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

I tried lots of solution online. For example, passing headers with "Content-Type" with "application/json" and so on. None of them helped. I already solved CORS issue in the server side as well.

But the request is working when I send the body it as string like this<ISimpleForm>(this.globals.API_ENDPOINT + "event/post", formData).subscribe(data=>{


The CORS error is gone when I stringify the body. But the problem is when I log the request data in the server side using $_POST, nothing is passed to the request. So the body is empty.

So, how can I make post request with some request parameters using HttpClient in Angular? What is wrong with my code and how can I fix it?

图片转代码服务由CSDN问答提供 功能建议

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


 /  ** 
 * @param \ Illuminate \ Http \ Request $ request 
 * @param \ Closure $ next 
 * @return mixed 
 * / 
公共函数句柄 ($ request,Closure $ next)
返回$ next($ request)
  - &gt; header('Access-Control-Allow-Headers','X-Requested-With,content-type')\  n  - &gt;标题('Access-Control-Allow-Origin','*')
  - &gt;标题('Access-Control-Allow-Methods','GET,POST,PUT,DELETE,OPTIONS');  


  this.http  .get&lt; IEvent []&gt;(this.globals.API_ENDPOINT +“event / list?email =”+ email).subscribe(data =&gt; {

上述GET请求正常。 但问题是使用一些参数发出POST请求。


  var formData = {\  n名称:“我的名字”
}; ISimpleForm&gt;(this.globals.API_ENDPOINT +“event / post”,formData).subscribe(data =&gt; {

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

 对预检请求的响应未通过访问控制检查:否'Access-Control-Allow-Origin'标题 存在于请求的资源上。  Origin 

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


 <时,请求正在工作 code>; ISimpleForm&gt;(this.globals.API_ENDPOINT +“event / post”,formData).subscribe(data =&gt; {
   \  n 

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

那么,如何使用Angular中的HttpClient使用一些请求参数发布帖子请求? 我的代码有什么问题,如何解决?

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

1条回答 默认 最新

  • drtwqc3744 2018-04-09 11:48

    I got the same error a while ago. this middleware works for methods not for preflight header. Check this Laravel 5.2 CORS, GET not working with preflight OPTIONS

    Suggesting this to use in your project instead of middleware.

    解决 无用
    打赏 举报

相关推荐 更多相似问题