Angular2 http.get results in a Mixed Content error or No 'Access-Control-Allow-Origin' header

Question

I am trying but unable to do a http.get request.

Below is the relevant parts of the Service I am using.

import { Injectable } from '@angular/core';
import { Http, Response, Headers,RequestOptions } from '@angular/http';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class StockService {

constructor(private http: Http) { }

    getStocks() {
        var url = "http://finance.yahoo.com/d/quotes.csv?s=AAPL&f=np";
        this.http.get(url).toPromise().then(function(info){
            console.log(info);
        });
    }
}

I know that the url http://finance.yahoo.com/d/quotes.csv?s=AAPL&f=np is valid because I am able to run a get request with it in Postman.

I am using npm-lite to run my app and it gets loaded at http://localhost:3000

Running at http://localhost:3000 results in the error : XMLHttpRequest cannot load http://finance.yahoo.com/d/quotes.csv?s=AAPL&f=np. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

I thought that the problem could be that my app is running on http and needed to be on a https to properly do the get request, so I created a bs.config.json file. npm-lite allows us to use options from browser-sync to run. I set the https to be true to allow my app to run on https.

bs-config.json

{
    "https" : true
}

Now when I run my app it will run on 'https://localhost:3000' and I get the error: zone.js:101Mixed Content: The page at 'https://localhost:3000/portfolio' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://finance.yahoo.com/d/quotes.csv?s=AAPL&f=np'. This request has been blocked; the content must be served over HTTPS.

I am unsure of how to proceed from here. Please let me know if I am properly setting up a http get request or if I am misunderstanding something. Thanks!

============================================

EDIT 1: in response to @AngJobs recommendation of : just add a special header in your request for cross browser request

I added a header in the request :

getStocks() {
    var url = "http://finance.yahoo.com/d/quotes.csv?s=AAPL&f=np";
    let headers = new Headers({ 'Access-Control-Allow-Origin': '*'});
    let options = new RequestOptions({ headers: headers });
    this.http.get(url, options).toPromise().then(function(info){
        console.log(info);
    });
}

I am back to running on http://localhost:3000 but now get the error: XMLHttpRequest cannot load https://finance.yahoo.com/d/quotes.csv?s=AAPL&f=np. Response for preflight is invalid (redirect)

And resolve the No 'Access-Control-Allow-Origin' error, just add a special header in your request for cross browser request — null canvas
– null canvas, Commented Jul 10, 2016 at 19:16
hi @AngJobs Thanks for the suggestion. I tried it out, but I get another error. Please check my latest edit to see the implementation — Rohan
– Rohan, Commented Jul 10, 2016 at 19:30

null canvas · Accepted Answer · 2016-07-10 19:52:55Z

1

Please set http content type in header and also make sure the server is authenticating CORS

 //NOT A TESTED CODE
    header('Content-Type: application/json;charset=UTF-8');
    header('Access-Control-Allow-Origin': '*');
    header('Access-Control-Allow-Methods: DELETE, HEAD, GET, OPTIONS, POST, PUT');
    header('Access-Control-Allow-Headers: Content-Type, Content-Range, Content-Disposition, Content-Description');
    header('Access-Control-Max-Age: 1728000');

answered Jul 10, 2016 at 19:52

null canvas

10.7k2 gold badges17 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rohan · Accepted Answer · 2016-07-10 22:40:39Z

0

So the ultimate problem was that the yahoo servers were not authenticating CORs. A simple solution to solve this is to use a proxy. The one I am using for now is : https://crossorigin.me/. In order to use this proxy, I just need to append the request url with https://crossorigin.me/.

There is no need to mess with request headers and I can continue to run the app on http:localhost

getStocks() {
    var url = "https://crossorigin.me/https://finance.yahoo.com/d/quotes.csv?s=AAPL&f=np";
    this.http.get(url).toPromise().then(function(response){
        console.log(response._body);
    });     
}

answered Jul 10, 2016 at 22:40

Rohan

1,3623 gold badges18 silver badges45 bronze badges

Collectives™ on Stack Overflow

Angular2 http.get results in a Mixed Content error or No 'Access-Control-Allow-Origin' header

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related