POST请求不适用于Angular5代码，但可以使用Postman

Question

前端：Angular5

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

在从我的Angular应用程序向服务器发出带有POST的HTTP content-type: 'application/json'请求时，出现以下错误：

  

无法加载http://localhost:8080/myk/api/v1/events/addevent：   对预检请求的响应没有通过访问控制检查：否   ＆＃39;访问控制允许来源＆＃39;标题出现在请求的上   资源。起源＆＃39; http://localhost:4200＆＃39;因此是不允许的   访问。响应的HTTP状态代码为403。

这是请求的代码：

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

在检查时，我发现POST请求不是OPTIONS，而是OPTIONS请求（按照this MDN article on CORS and preflighted requests）。

然而，当我使用Postman尝试相同的请求时，它工作得很好。

当我没有在服务器上处理OPTIONS请求时，Postman如何处理content-type请求的问题？

此外，我可以做什么（保持相同的ajax并且无需修改服务器端代码）来解决此问题？

注1：虽然this question解决了同样的问题，但建议的解决方案需要更改内容类型。

注2：当我运行另一个尝试使用date_format调用发出POST请求的应用程序（由Angularjs设计，而非我设计）时，它可以正常工作精细。 （我不明白为什么这个有用，而且，有一个与angular5相关的答案将会受到赞赏。我把这个注释包括在内，以防它有助于找出Angular5应用程序的问题）

编辑：这可能接近于挑剔，但我特意想通过修改客户端代码而不是使用扩展或与浏览器相关的任何修改来尝试解决上述问题。但是，如果不可能，我可以更改服务器端代码。

Answer 1

此问题称为 CORS 。 C ross O rigin R esource S haring。当请求和响应的来源不同时会出现这种情况。例如：如果您的项目位于 https://139.43.33.122:1111/ 且您的服务器托管在 https://123.0.3.444:3000 上，则您的请求和响应的来源完全不同因此，浏览器将阻止响应。这是浏览器的事情。邮差不关心他们的起源。要接收回复，有两种方式（可能更多，但我只使用这两种方式）。

1. 其他标题：如果您拥有对服务器代码的访问权限/权限，则向服务器响应添加其他标头： Access-Control-Allow-Origin：http://siteA.com，Access-Control-Allow-Methods：GET，POST，PUT，Access-Control-Allow-Headers：Content-Type 。

2. 使用扩展程序：有多个扩展程序可以绕过此限制。如果您无权访问或更改服务器响应，那么这就是您要采用的方法。我个人只使用此方法。

Answer 2

我遇到了同样的问题，由于article，我找到了避免CORS和403错误的技巧。

1. 在您的Google Chrome上添加Postman Interceptor：https://chrome.google.com/webstore/detail/postman-interceptor/aicmkgpgakddgnaphhhpliifpcfhicfo/support?hl=en

2. 在邮差中激活邮差拦截器



1. 通过Postman界面启动您的请求并捕获cookie



1. 打开Chrome开发工具，转到控制台并手动添加由于邮差拦截器而找到的Cookie

   的document.cookie = “keyofcookie = valueofcookie”



重试您的请求，它有效！

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