Angular - 被 CORS 策略阻止：“Access-Control-Allow-Origin”标头包含多个值“*、*”

Question

当我尝试连接到另一个域中的 REST 服务时出现错误。我知道可以通过在java Rest服务中添加CORS来解决。但是可以通过改变 Angular 方面的一些东西来实现吗？

Access to 'http://someurl/RestWeb/getPerson' XMLHttpRequest at from origin 'http://localhost:4200' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, *'

我的休息服务：http://someurl/RestWeb/getPerson，我所有的休息服务网址如下：http://someurl/RestWeb/SOMETHING

我的 Angular 网址：http://someotherurl

在搜索不同的文章后，我已经尝试更改proxy.conf.json和package.json。下面是我的更改，但我仍然得到相同的结果。

代理.conf.json

{
  "/RestWeb": {
    "target": "http://someurl/",
    "secure": false,
    "changeOrigin": true  // I tried with and without this. No luck
  }
}

包.json

"start": "ng serve --proxy-config proxy.conf.json",

服务：

  findAll(): Observable<Person[]> {
    return this.httpClient.get<string[]>('http://someurl/RestWeb/getPerson');
  }

运行使用：

npm start

作为临时对策，现在我正在使用 chrome 浏览器测试我的应用程序

chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security

Answer 1

看来 webpack-dev-server 的代理被滥用了。

proxy.conf.json

{
  "/api": {
    "target": "http://someurl.com/",
    "changeOrigin": true,
    "secure": false,
    "pathRewrite": {
      // replace `/api` with empty string, because real api path isn't contain 
      // `/api` segment
      // eg: http://localhost:4200/api/getPerson => http://someurl.com/getPerson
      "/api": ""
    }
  }
}

person.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class PersonService {
  constructor(private http: HttpClient) {}

  async getPerson() {
    return (
      this.http
        // you shouldn't use `http://someurl.com/getPerson` url directly,
        .get('/api/getPerson')
        .toPromise()
    );
  }
}