angular - Error de CORS: "las solicitudes solo son compatibles con esquemas de protocolo: http...", etc.

express

Question

Estoy intentando una aplicación simple. Tengo un backend Express que devuelve una cadena JSON cuando se visita en localhost:4201/ticker . Cuando ejecuto el servidor y solicito este enlace desde mi Servicio Angular a través de http , aparece el siguiente error:

XMLHttpRequest no puede cargar localhost: 4201 / ticker. Las solicitudes de origen cruzado solo son compatibles con esquemas de protocolo: http, data, chrome, chrome-extension, https.

Leí el siguiente artículo: Comprensión y uso de CORS y, como se indicó, usé el módulo cors con mi servidor express. Sin embargo, todavía recibo el error como se indicó anteriormente. Parte del código se da a continuación:

Código del servidor:

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

Aquí está la función del controlador:

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

Aquí está mi servicio 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())
}
}

Así es como estoy usando mi Servicio:

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

Answer 1

XMLHttpRequest no puede cargar localhost: 4201 / ticker. Las solicitudes de origen cruzado solo son compatibles con esquemas de protocolo: http, data, chrome, chrome-extension, https.

Cada vez que ve ese mensaje de "solo compatible con esquemas de protocolo" , es casi seguro que se ha olvidado de poner el https o http en la URL de solicitud en su código.

Entonces, en este caso, la solución es usar la URL http://localhost:4201/ticker en su código aquí:

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

… Porque sin http:// there, localhost:4201/ticker no es realmente la URL que pretendes.

Answer 2

El problema era la falta de http:// en la url