Question

最近我遇到了以下错误：

从源访问“ localhost：8080 / api / xyz”处的XMLHttpRequest “ http://localhost:4200”已被CORS政策禁止：跨来源仅协议方案支持请求：http，data，chrome， chrome-extension，https。

Angular为此提供了一种简单的解决方案，但是花了我很多时间才能找到它。我也没有在Angular的文档中找到关于SO的任何内容。

显然，此错误与Angular完全无关。我相信几乎每个开发人员都会不时遇到此错误，我想分享一个简单的解决方案，以便我们继续进行重要的工作。

首先，我的设置是： Angular 7，以及HttpClient（doc）的使用

我创建了一个小服务：

export class HelloServerService {
  private readonly rootApi: string = 'http://localhost:8080/api/';

  constructor(@Inject(HttpClient) private readonly http: HttpClient) {
  }

  public getHelloWorld(name: string): Observable<string> {
    return this.http.get(this.rootApi + name, {responseType: 'text', params: {}}) as Observable<string>;
  }
}

Answer 1

记住：此答案仅用于开发目的

首先，关键问题是较新的浏览器阻止了跨域请求，这还涉及区分端口号：

所以localhost:4200与localhost:8080的起源不同

使用代理可能是解决此问题的最简单方法

Angular CLI能够轻松配置一个简单的代理，该代理将所有已定义的api调用委托给我们首选的目的地。

This article from Richard Russell介绍了如何配置代理。

简而言之：

我们创建一个新文件proxy.conf.json

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false,
    "logLevel": "debug",
    "pathRewrite": {
      "^/api": ""
    }
  }
}

将其添加到我们的angular.json

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

并通过ng serve运行它：

预期的输出：

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
[HPM] Proxy created: /api  ->  http://localhost:8080
[HPM] Proxy rewrite rule created: "^/api" ~> ""

跨源请求被阻止的CORS-使用角度cli求解

1 个答案: