CORS 错误:“请求仅支持协议方案:http……"等

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

问题描述

我正在尝试运行一个简单的应用程序.我有一个 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 模块与我的 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 扩展，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……"等的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！