web-dev-qa-db-fra.com

Erreur CORS: «les demandes ne sont prises en charge que pour les schémas de protocole: http…», etc.

J'essaie d'une application simple. J'ai un backend Express qui retourne une chaîne JSON lors de la visite à localhost:4201/ticker. Lorsque j'exécute le serveur et que je fais une demande à ce lien à partir de mon Angular Service over http, j'obtiens l'erreur suivante:

XMLHttpRequest ne peut pas charger localhost: 4201/ticker. Les demandes Cross Origin ne sont prises en charge que pour les schémas de protocole: http, data, chrome, chrome-extension, https.

J'ai lu l'article suivant: Comprendre et utiliser CORS et, comme indiqué, j'ai utilisé le module cors avec mon serveur express. Cependant, je reçois toujours l'erreur comme indiqué ci-dessus. Une partie du code est donnée ci-dessous:

Code serveur:

private constructor(baseUrl: string, port: number) {
    this._baseUrl = baseUrl;
    this._port = port;
    this._express = Express();
    this._express.use(Cors());
    this._handlers = {};
    this._hInstance = new Handlers();
    this.initHandlers();
    this.initExpress();
}
private initHandlers(): void {
    // define all the routes here and map to handlers
    this._handlers['ticker'] = this._hInstance.ticker;
}
private initExpress(): void {
    Object.keys(this._handlers)
        .forEach((key) => {
            this._express.route(this._url(key))
                .get(this._handlers[key]);
        });
}
private _url(k: string): string {
    return '/' + k;
}

Voici la fonction de gestionnaire:

ticker(req: Request, res: Response): void {
    Handlers._poloniex
        .getTicker()
        .then((d) => {
            return Filters.tickerFilter(d, Handlers._poloniex.getBases());
        })
        .then((fdata) => {

            //res.header('Access-Control-Allow-Origin', "*");
            //res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
            res.header('Content-Type', 'application/json');
            res.send(JSON.stringify(fdata));
        })
        .catch((err) => {
           this._logger.log([
                'Error: ' + err.toString(),
                'File: ' + 'handlers.class.ts',
                'Method: ' + 'ticker'
            ], true);
        });   
}

Voici mon Angular:

export class LiveTickerService {

  private _baseUrl: string;
  private _endpoints: {[key:string]: string};

  constructor(
    private _http: Http
  ) {
    this._baseUrl = 'localhost:4201/';
     this._endpoints = {
       'ticker': 'ticker'
     };
   }

  getTickerData(): Observable<Response> {
    return this._http.get(this._baseUrl + this._endpoints['ticker'])
      .map(resp => resp.json())
  }

}

Voici comment j'utilise mon service:

getTicker() {
  let a = new Array<{[key: string]: any}>();
  this._tickerService.getTickerData()
     .subscribe(
        data => {
          let parsed = JSON.parse(JSON.stringify(data));
          Object.keys(parsed)
            .forEach((k) => {
              a.Push({k: parsed[k]});
            });
         this.data = a;
        },
        error => console.log(error.toString()),
        () => console.log('Finished fetching ticker data')
      );
  return this.data;
}
javascriptangularexpresscors
13
Abrar Hossain

XMLHttpRequest ne peut pas charger localhost: 4201/ticker. Les demandes Cross Origin ne sont prises en charge que pour les schémas de protocole: http, data, chrome, chrome-extension, https.

Chaque fois que vous voyez que "uniquement pris en charge pour les schémas de protocole", cela signifie presque certainement que vous avez juste oublié de mettre le https ou http sur l'URL de la demande dans votre code.

Dans ce cas, le correctif consiste à utiliser l'URL http://localhost:4201/ticker dans votre code ici:

this._baseUrl = 'http://localhost:4201/';

… Car sans le http:// Là, localhost:4201/ticker n'est pas vraiment l'URL que vous souhaitez.

60
sideshowbarker