POST 请求不适用于 Angular5 代码，但适用于 Postman [英] POST request does not work from Angular5 code but works from Postman
问题描述
前端:Angular5
后端:Java(在 Wildfly 8.x 服务器上运行)
在使用 content-type: 'application/json' 从我的 Angular 应用程序向服务器发出 HTTP POST 请求时，我收到以下错误:
加载失败
- 借助 Postman 界面启动您的请求并捕获 cookie
打开您的 Chrome 开发工具，进入控制台并手动添加通过 postman 拦截器找到的 cookie
document.cookie="keyofcookie=valueofcookie"
重试您的请求，它有效！
否则，为了避免 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.
Add Postman Interceptor on your Google Chrome : https://chrome.google.com/webstore/detail/postman-interceptor/aicmkgpgakddgnaphhhpliifpcfhicfo/support?hl=en
Activate Postman Interceptor in Postman
- Launch your request and capture the cookie thanks to Postman interface
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屋！
