Asked  6 Months ago    Answers:  5   Viewed   47 times

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 cannot load localhost:4201/ticker. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

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:

Server code:

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

Here is the handler function:

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

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

 Answers

97

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

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.

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

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

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

Tuesday, June 1, 2021
 
jakubos
answered 6 Months ago
22

This error is happening because you are just opening html documents directly from the browser. To fix this you will need to serve your code from a webserver and access it on localhost. If you have Apache setup, use it to serve your files. Some IDE's have built in web servers, like JetBrains IDE's, Eclipse...

If you have Node.Js setup then you can use http-server. Just run npm install http-server -g and you will be able to use it in terminal like http-server C:locationtoapp.

Friday, June 4, 2021
 
Naveen
answered 6 Months ago
17

You can deploy a CORS Anywhere server to Heroku in literally just 2-3 minutes, with 5 commands:

git clone https://github.com/Rob--W/cors-anywhere.git
cd cors-anywhere/
npm install
heroku create
git push heroku master

After running those commands, you’ll end up with your own CORS Anywhere proxy running at, e.g. https://cryptic-headland-94862.herokuapp.com/. So then instead of prefixing your request URL with https://cors-anywhere.herokuapp.com, prefix it instead with your proxy’s URL.

Saturday, July 10, 2021
 
Gerardo
answered 5 Months ago
33

you must run your app in the server , use node js

1- Install NodeJS // Hint: If you're on a Mac, you want to install and use Homebrew for this

2- Open your favorite terminal emulator

2- Install http-server by running: npm install http-server -g

3- Start http-server by running: http-server 'path/to/your/angular/root/directory' -o

That last command — specifically, the -o flag — should open a browser window at: localhost:8080

OR// use cd to find your directory app
and use this command : http-server . -o

"." mean your current directory

you can see : https://teamtreehouse.com/community/i-am-not-able-to-load-my-json-file

Sunday, August 1, 2021
 
im1dermike
answered 4 Months ago
32

I had to mess around with a few different things to get this working. First, I upgraded to the edge angular, as some values could not be globally defaulted on $http that I needed.

In the angular config() step, I added:

// Add COR ability
$httpProvider.defaults.useXDomain = true;
$httpProvider.defaults.withCredentials = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];

In express, I created an angular middleware:

exports.angularHeaders = function(req, res, next){
    res.header("Access-Control-Allow-Origin", '{{insert your ui endpoint}}');
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
    res.header("Access-Control-Allow-Credentials", "true");
    next();
};
Friday, November 26, 2021
 
Jon Whitefield
answered 3 Days ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share