0

I checked the mentioned post, first it has nothing to do with AngularJS, second, the answer to that post is: And NO, you can't use JSONP for fetching html data.

How come my post is a duplicate, than in that other post the answer says - you cannot do that, but here people say that I can (via $sce)? Who is right?

Basically I want to make this work:

When I use $http.get:

getWeatherForecast() {
    return this.$http.get('https://weather.gc.ca/city/pages/on-143_metric_e.html');
}

I get exception:

XMLHttpRequest cannot load https://weather.gc.ca/city/pages/on-143_metric_e.html. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

Its clear - the CORS issue.

But it should be working for JSONP, right?

When I use $http.jsonp:

getWeatherForecast() {
    return this.$http.jsonp('https://weather.gc.ca/city/pages/on-143_metric_e.html');
}

I get exception:

angular.js:14642 Error: [$sce:insecurl] http://errors.angularjs.org/1.6.5/$sce/insecurl?p0=https%3A%2F%2Fweather.gc.ca%2Fcity%2Fpages%2Fon-143_metric_e.html at http://localhost:8080/node_modules/angular/angular.min.js:7:76 at getTrusted (http://localhost:8080/node_modules/angular/angular.min.js:157:67) at Object.c.(anonymous function) [as getTrustedResourceUrl] (http://localhost:8080/node_modules/angular/angular.min.js:158:352) at q (http://localhost:8080/node_modules/angular/angular.min.js:103:257) at http://localhost:8080/node_modules/angular/angular.min.js:102:8 at http://localhost:8080/node_modules/angular/angular.min.js:136:167 at m.$digest (http://localhost:8080/node_modules/angular/angular.min.js:147:70) at m.$apply (http://localhost:8080/node_modules/angular/angular.min.js:150:281) at gapi.client.init.then (http://localhost:8080/app/google.auth.js:26:33) at h.r2 (https://apis.google.com//scs/apps-static//js/k=oz.gapi.en_GB.F7DGotPmXwE.O/m=auth2,client/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCNq_HS-9xmY0NiaH7I_fyUJGoSh1Q/cb=gapi.loaded_0:107:107) "Possibly unhandled rejection: {}"

Full service code:

Not sure how to use $sce, the original AngularJS documentation is absolutely unclear. Changed code to this, now it throws many other exceptions:

namespace AppDomain {
    export class GoogleService {
        static $inject: string[] = ['$q', '$http', '$sce'];
        constructor(private $q: ng.IQService, 
                    private $http: ng.IHttpService, 
                    private $sce: ng.ISCEService) {
            console.log('GoogleService');
        }

        getWeatherForecast() {
            let url = 'https://weather.gc.ca/city/pages/on-143_metric_e.html';
            this.$sce.trustAsResourceUrl(url);
            return this.$http.jsonp(url).then(response => {
                var xxx = response;
            }, response => {
                var yyy = response;
            })
        }

    angular.module('app').service('GoogleService', GoogleService);
}

And now I am getting all these errors (why cant they write clear documentation that people can understand :(

enter image description here

monstro
  • 6,254
  • 10
  • 65
  • 111
  • I dont need json, I need HTML – monstro Aug 30 '17 at 18:36
  • Why don't you inject $sce and trust the url [like so](https://docs.angularjs.org/api/ng/service/$sce#trustAsResourceUrl)? – Kyle Krzeski Aug 30 '17 at 18:38
  • I dont know what it is – monstro Aug 30 '17 at 18:43
  • I dont understand how to use it from the documentation, please take a look at my updated post, is this the right way to use it? Also someone posted "This question already has an answer here:" and the answer in that post - is that you cannot do that, get html via jsonp - so, who is right? – monstro Aug 30 '17 at 19:11
  • [Same Origin Policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) is enforced by the browser and the AngularJS framework can't override it. Use $sce if you want to load the document in an [` – georgeawg Aug 30 '17 at 19:29
  • 1
    Do this instead: `getWeatherForecast() { return this.$http.get('https://cors-anywhere.herokuapp.com/https://weather.gc.ca/city/pages/on-143_metric_e.html'); }`. That is, change the URL in your request to `https://cors-anywhere.herokuapp.com/https://weather.gc.ca/city/pages/on-143_metric_e.html`. And for an explanation, see the **How to use a CORS proxy to get around “No Access-Control-Allow-Origin header” problems** section of the answer at https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141#43881141 – sideshowbarker Aug 30 '17 at 23:29
  • `$http.jsonp` works because underneath it just adds a `script` element to the DOM with the URL of its `src` attribute set to the request URL from your code. That works cross-origin because the browser allows `script` elements to have a `src` attribute with a URL from a different origin. So unlike `$http.get`, `$http.jsonp` doesn’t call XHR behind the scenes. That’s why `$http.jsonp` works in this case even though the server the request is sent to doesn’t support CORS. The `$http.get` request fails because it uses XHR and for that to work, the server the request goes to must support CORS. – sideshowbarker Aug 30 '17 at 23:36

0 Answers0