0

最近我遇到以下错误:

从源“ http://localhost:4200 ”访问“localhost:8080/api/xyz”处的 XMLHttpRequest已被 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>;
  }
}
4

1 回答 1

2

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

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

所以localhost:4200不是同一个起源localhost:8080

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

Angular CLI 能够轻松配置一个简单的代理,它将所有已定义的 api 调用委托给我们喜欢的目标。

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" ~> ""
于 2019-03-17T12:20:08.173 回答