问题
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.
回答1:
This issue is known as CORS. Cross Origin Resource Sharing. This is arises when the origin of the request and response is different. For example: If your project is on https://139.43.33.122:1111/ and your server is hosted on https://123.0.3.444:3000, then the origin of your request and response are completely different and thus, browser will block the response. This is the browser thing. Postman doesn't care about their origin. To receive response, there are 2 ways (maybe more but i use these 2 only).
Additional Headers: If yoou have access/permission to server code, then add an additional header to the server responses: Access-Control-Allow-Origin: http://siteA.com, Access-Control-Allow-Methods: GET, POST, PUT, Access-Control-Allow-Headers: Content-Type.
Use Extensions: There are multiple extensions that can bypass this restriction. IF you do not have access or permission to change the server response, then this is the way to go.I'm personally using this method only.
回答2:
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.
来源：https://stackoverflow.com/questions/49361030/post-request-does-not-work-from-angular5-code-but-works-from-postman