2017-09-16 8 views
3

私は単純なアプリケーションを試しています。私はlocalhost:4201/tickerにアクセスしたときにJSON文字列を返すExpressバックエンドを持っています。私は、サーバーを実行したとき、私は次のエラーを取得する、http上で、私の角度のサービスから、このリンクにリクエストを行います。角4 CORSエラー:「要求はプロトコルスキームに対してのみサポートされています:http ...」

XMLHttpRequest cannot load localhost:4201/ticker. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

は、私は次の記事を読む:Understanding and Using CORSと、述べたように、とのcorsモジュールを使用しました私の高速サーバー。しかし、私はまだ上記のエラーが発生しています。コードの一部は以下の通りである:

Serverコード:ここで

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

をハンドラ関数です:

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

ここに私の角度サービスされています

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

} 

ここではどのようにされました私は私のサービスを使用しています:

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

答えて

12

XMLHttpRequest cannot load localhost:4201/ticker. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

あなたが「唯一のプロトコルスキームのためのサポート」ことがわかりいつでもメッセージが、それはほぼ確実にあなたは自分のコードでリクエストURLにhttpsまたはhttpを置くことを忘れてしまったことを意味します。

したがって、この場合には、修正はここにあなたのコード内のURL http://localhost:4201/tickerを使用することです:

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

...そこhttp://せず、localhost:4201/tickerは本当にあなたが意図したURLではありませんので。

関連する問題