doujingke4981
doujingke4981
2018-04-09 10:49
浏览 264
已采纳

由于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-Headers','X-Requested-With,content-type')
        ->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"
}
this.http.post<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

this.http.post<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中创建了一个中间件。

这是Laravel中间件

 类Cors 
 {
 /  ** 
 *处理传入的请求。
 * 
 * @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');  
} 
} 
   
 
 

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

  this.http  .get&lt; IEvent []&gt;(this.globals.API_ENDPOINT +“event / list?email =”+ email).subscribe(data =&gt; {
 //对数据执行某些操作
}); 
    
 
 

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

我发送这样的POST请求。

  var formData = {\  n名称:“我的名字”
} 
this.http.post&lt; 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> this.http.post&lt; ISimpleForm&gt;(this.globals.API_ENDPOINT +“event / post”,formData).subscribe(data =&gt; {
 
})
   \  n 
 

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

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

相关推荐