POST请求不适用于Angular5代码，但适用于Postman [英] POST request does not work from Angular5 code but works from Postman

问题描述

前端：Angular5

后端：Java（在Wildfly 8.x服务器上运行）

创建HTTP POST 请求，其中 content-type：'application / json'从我的Angular应用程序到服务器，出现以下错误：

无法加载

3. 借助Postman界面启动您的请求并捕获cookie

4. 打开您的Chrome开发工具，转到控制台并手动添加由于邮递员拦截器而找到的cookie

   
   
   

   document.cookie = keyofcookie = valueofcookie

< img src = https://i.stack.imgur.com/HOvsK.png alt =在此处输入图片描述>

重试您的请求，它有效！

否则，为了避免CORS，您可以使用描述的代理此处。

Frontend: Angular5

Backend: Java (Running on a Wildfly 8.x server)

On making an HTTP POST request with content-type: 'application/json' from my Angular application to the server, I get the following error:

Failed to load http://localhost:8080/myk/api/v1/events/addevent: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 403.

This is the code for the request:

const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) }; this.http.post("http://localhost:8080/myk/api/v1/events/addevent", jsonPayload, httpOptions).subscribe();

On inspecting, I found that instead of a POST request, an OPTIONS request was being made (as in accordance with this MDN article on CORS and preflighted requests).

However, when I tried the same request using Postman, it worked perfectly fine.

How does Postman not face an issue with the OPTIONS request when I'm not handling the OPTIONS request at the server?

Also, what can I do (while maintaining the same content-type and without having to modify the server side code) to solve this issue?

Note 1: Although this question addresses the same issue, the suggested solution requires changing the content-type.

Note 2: When I run another application (designed, not by me, in Angularjs) which attempts to make a POST request using an ajax call, it works fine. (I do not understand why this works and, besides, an answer related to angular5 would be appreciated. I included this note in case it helps in figuring out the problem with the Angular5 application)

EDIT: This might be bordering on fussy, but I'm specifically looking to try to solve the above by modifying client side code and not by using extensions or any modifications related to the browser. However, if none of that is possible, I'm open to changing server-side code.

解决方案

I had the same issue and I have found a trick to avoid both CORS and 403 error thanks to this article.

1. Add Postman Interceptor on your Google Chrome : https://chrome.google.com/webstore/detail/postman-interceptor/aicmkgpgakddgnaphhhpliifpcfhicfo/support?hl=en

2. Activate Postman Interceptor in Postman

3. Launch your request and capture the cookie thanks to Postman interface

4. Open your Chrome development tool, go to the console and add manually the cookie found thanks to postman interceptor

   document.cookie="keyofcookie=valueofcookie"

Retry your request, it works !

Otherwise, just to avoid CORS, you can use the proxy described here.

这篇关于POST请求不适用于Angular5代码，但适用于Postman的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！