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 扩展，https.

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

我阅读了以下文章:理解和使用CORS 如上所述，在我的快速服务器中使用了 cors 模块.但是，我仍然收到上面给出的错误.部分代码如下:

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 扩展，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 就不是您真正想要的 URL.

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

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