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

(adsbygoogle = window.adsbygoogle || []).push({}); 如何解决Angular或Angular 6中的跨源资源共享（CORS）在具有不同端口的localhost上进行跨域调用时出现问题？

解决以上问题

首先，您需要为端口4200共享Spring引导资源。使用要共享的资源的 注释类或方法。

您必须在角度应用程序中配置代理。因此，在有角度的根应用程序中创建一个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’ ]

解决方法

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

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

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

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