交叉原点请求被阻止的CORS-使用角度cli解决问题[仅适用于开发人员][重复]

Question

我创建了一个小服务：

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不是同一来源

{
  "/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" ~> ""