typescript - Angular - blocat de politica CORS: Header-ul 'Access-Control-Allow-Origin' conține mai multe valori '* , *'


Primești o eroare atunci când încerci să te conectezi la un serviciu REST care se află pe un alt domeniu. Înțeleg că poate fi rezolvat prin adăugarea CORS în serviciul REST Java. Dar este posibil să se rezolve schimbând ceva pe partea de 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 '*, *'

Serviciul meu Rest: http://someurl/RestWeb/getPerson, toate URL-urile serviciului meu Rest sunt de genul: http://someurl/RestWeb/SOMETHING

Și URL-ul meu Angular: http://someotherurl

După ce am căutat diferite articole, am încercat deja să schimb proxy.conf.json și package.json. Mai jos sunt modificările mele, și tot primesc același rezultat.

proxy.conf.json

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

package.json

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

serviciu :

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

rulează folosind:

npm start

Ca măsură temporară de contracarare, acum îmi testez aplicația în browserul Chrome folosind

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

Răspuns #1

Se pare că proxy-ul din webpack-dev-server a fost folosit greșit.

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()
    );
  }
}

Răspunsul #2

În fișierul tău de configurare a proxy-ului, configurezi proxy-ul pentru http://localhost:4200/api*. Deci, proxy-ul nu va funcționa pentru /getPerson