Angular或Angular 6中的跨源资源共享（CORS）。在具有不同端口的localhost上进行跨域调用时出现问题

小编典典

spring-boot

我遇到了这样一种情况，我从我的angular 6应用程序调用了我的spring boot应用程序。当我以不同角度调用在不同端口上运行的应用程序的HTTP
post方法时，将引发异常。

从源’ http：// localhost：4200 ‘ 在’ http：//
localhost：8080 / api ‘
处对XMLHttpRequest的访问已被CORS策略阻止：对预检请求的响应未通过访问控制检查：它没有HTTP好的状态。

我的Angular应用程序在’ http：// localhost：4200
‘端口号上运行：4200我的Spring Boot应用程序在’ http：// localhost：8080 /
api ‘上运行：端口号：8080。

没有直接的答案可以解决这个问题。很少有黑客可以禁用chrome的安全性，使用NGINX可以解决此问题。

阅读 690

2020-05-30

共1个答案

小编典典

解决以上问题

首先，您需要为端口4200共享Spring引导资源。使用要共享的资源的 @CrossOrigin（origins =“ http：// localhost：4200 ”）注释类或方法。
您必须在角度应用程序中配置代理。因此，在有角度的根应用程序中创建一个proxy.json文件。内容在下面
```
{
```
“/api/*”: {
“target”: “http://localhost:8080",
“secure”: “false”,
“logLevel”: “debug”,
“changeOrigin”: true
}

}

然后运行ng serve --proxy-config proxy.json此命令，它将编译代码。您应该在控制台上看到类似的内容。
```
building modules 3/3 modules 0 active[HPM] Proxy created: /api ->
```
http://localhost:8080 Subscribed to http-proxy events: [ ‘error’, ‘close’ ]

2020-05-30