1

Im making an app, where I want to sent $http.get requests to duckduckgo's API but their requests are done over HTTP. Seeing my site is HTTP is get the following error:

angular.js:11756 Mixed Content: 
The page at 'URL' was loaded over HTTPS, 
but requested an insecure XMLHttpRequest endpoint 'http://api.duckduckgo.com/'. 
This request has been blocked; the content must be served over HTTPS.

When I adding the s to my request, I obviously get the following (seeing the CORS isn't setup):

XMLHttpRequest cannot load:
https://api.duckduckgo.com/?q=Undulated%20Tinamou&format=json&pretty=1. 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'https://URL' is therefore not allowed access. The response had HTTP status code 405.

My question: Is there any was for me to get the json and bypass one of the two stated above?

Edit1: 

$http.get('https://api.duckduckgo.com/?q=' + birdname + '&format=json&callback=jsonp&pretty=1').then(function(res){
            console.log(res.data);
        });

I also tried the following:

$http.jsonp('https://api.duckduckgo.com/?q=' + birdname + '&format=json&callback=jsonp&pretty=1').then(function(res){
                console.log(res.data);
            });

With the second, I am getting the following error:

Uncaught ReferenceError: json is not defined
Pex
  • 519
  • 2
  • 12
  • 30
  • Use a proxy on your server to communicate with api – charlietfl May 28 '16 at 21:13
  • Could u give me an example on how to do this, or link me to an example please? I don't have the slightest clue on how to do this. – Pex May 28 '16 at 21:15
  • What server language do you have available? Basically it means you make your requests to your server script and it sends and receives data with api and then returns data to your ajax request. Not hard to research this start with `ajax proxy` search – charlietfl May 28 '16 at 21:17
  • 1
    Also check if their api supports `jsonp` which isn't subject to CORS – charlietfl May 28 '16 at 21:21
  • I'm using MEAN. Serverside is Express/Nodejs – Pex May 28 '16 at 21:21
  • So you install an http request module nd let it do the talking with the api but check docs for jsonp first which would be much simpler – charlietfl May 28 '16 at 21:23
  • The api docs say it does allow jsonp, though when I try it, I still get the following: `Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.` - https://duckduckgo.com/api – Pex May 28 '16 at 21:29
  • Then you aren't making jsonp request properly. It is a script request...not ajax and is not CORS restricted. Show relevant code in question – charlietfl May 28 '16 at 21:32
  • @charlietfl I added the edit. – Pex May 28 '16 at 21:40
  • Not using proper callback string per $http` docs. Angular looks for that specific string – charlietfl May 28 '16 at 21:51
  • @charlietfl Yea I just saw that, the callback was json instead of jsonp.. When editing it to 'callback=jsonp' I still get the `Uncaught ReferenceError: jsonp is not defined`. Though when looking on what it returns, it does say the following: `jsonp({ "DefinitionSource" : "", "Heading" : "Highland Tinamou" ....` – Pex May 28 '16 at 21:58
  • 1
    But that's not the string that angular expects it expects. Look at examples in docs as well as the config explanation https://docs.angularjs.org/api/ng/service/$http#jsonp – charlietfl May 28 '16 at 22:00
  • @charlietfl I got it to work! Using the following code: `$http.jsonp('https://api.duckduckgo.com/?q=' + birdname + '&format=json&callback=JSON_CALLBACK&pretty=1').then(function(res){ console.log(res.data); });` – Pex May 28 '16 at 22:01
  • 1
    Right...need to read the fine print and use proper configuration. That's what docs are for – charlietfl May 28 '16 at 22:02
  • If you want, you can add your comments as an answer so I can accept it. – Pex May 28 '16 at 22:02

0 Answers0