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

Posted 2023-03-04

【中文标题】CORS 错误：“请求仅支持协议方案：http……”等

【英文标题】：CORS Error: “requests are only supported for protocol schemes: http…” etc

【发布时间】：2021-06-17 11:35:12

【问题描述】：

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

XMLHttpRequest 无法加载 localhost:4201/ticker。跨原点 请求仅支持协议方案：http、data、chrome、 chrome 扩展，https。

我阅读了以下文章：Understanding and Using CORS 并如上所述，将cors 模块与我的快速服务器一起使用。但是，我仍然收到上面给出的错误。部分代码如下：

服务器代码：

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 服务：

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;

【参考方案1】：

XMLHttpRequest 无法加载 localhost:4201/ticker。跨原点 请求仅支持协议方案：http、data、chrome、 chrome 扩展，https。

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

所以在这种情况下，解决方法是在您的代码中使用 URL http://localhost:4201/ticker：

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

...因为那里没有http://，所以localhost:4201/ticker 并不是您真正想要的URL。