Question

我正在本地桌面上运行两个应用程序。

一个内置于Java中作为API，另一个内置于Angular中，后者是前端应用程序。

我正在尝试从Angular访问后端数据，但遇到错误：

CORS策略已阻止从来源“ http://localhost:8080”访问“ http://localhost:4200”处的XMLHttpRequest：否请求中存在“ Access-Control-Allow-Origin”标头资源。

 public getMethod(): Observable<Availability[]> {
    return this.http
    .get(API_URL)
      .map(response => {

      })
      .catch(this.handleError);
  }

我正在Angular中这样做，以获取数据，并且错误不断出现。

我的问题是，这是角度错误还是后端错误（Java）？

Answer 1

这是一个后端错误。您必须在您的Java后端允许使用cors。选中this

Answer 2

在本地发出http请求的一种简单方法是在浏览器中安装cors扩展程序

例如，如果您使用Google Chrome浏览器，请安装它：

enter image description here

因此，启用cors单击按钮并发出请求：）

Answer 3

在项目的根目录中proxy.conf.json旁边创建一个package.json。

这是一个例子。

{
    "/service/*": {
        "target": "http://localhost:8080",
        "changeOrigin": true
    }
}

将您的proxy.conf.json添加到serve中的options angular.json中。如：

 "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build",
            "proxyConfig": "proxy.conf.json"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        }

就是这样。只需像平常一样ng serve，就可以开始代理服务器。请确保您没有在host url通话中手动提供http。只需向/service请求即可。

使用Angular 7作为前端，后端作为Java遇到CORS错误

3 个答案: