CORS错误:“仅协议方案支持请求:http…"等 [英] CORS Error: “requests are only supported for protocol schemes: http…” etc

问题描述

我正在尝试运行一个简单的应用程序.我有一个Express后端，当在localhost:4201/ticker访问时返回一个JSON字符串.当我运行服务器并通过http从我的Angular服务请求此链接时，出现以下错误:

I am trying to run a simple application. I have an Express backend which returns a JSON string when visited at localhost:4201/ticker. When I run the server and make a request to this link from my Angular Service over http, I get the following error:

XMLHttpRequest无法加载localhost:4201/ticker.交叉原点 仅协议方案支持请求:http，data，chrome， chrome-extension，https.

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

我阅读了以下文章:理解和使用如上所述，CORS 与cors模块一起用于我的Express服务器.但是，我仍然收到如上所述的错误.部分代码如下:

I read the following article: Understanding and Using CORS and as stated, used the cors module with my express server. However, I am still getting the error as given above. Part of code is given below:

服务器代码:

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

这是我的Angular服务:

Here is my Angular Service:

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

}

这是我使用我的服务的方式:

Here is how I am using my 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;
}

推荐答案

XMLHttpRequest无法加载localhost:4201/ticker.交叉原点 仅协议方案支持请求:http，data，chrome， chrome-extension，https.

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

每当您看到仅支持协议方案" 消息时，几乎可以肯定，这意味着您只是忘记了将https或http放在代码中的请求URL上

Any time you see that "only supported for protocol schemes" message, it almost certainly means you’ve just forgotten to put the https or http on the request URL in your code.

因此，在这种情况下，解决方法是在此处的代码中使用URL http://localhost:4201/ticker:

So in this case, the fix is to use the URL http://localhost:4201/ticker in your code here:

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

…因为那里没有http://，所以localhost:4201/ticker并不是您想要的网址.

…because without the http:// there, localhost:4201/ticker isn’t really the URL you intend.

这篇关于CORS错误:“仅协议方案支持请求:http…"等的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！