1

I have Json data being pulled from a REST API. On success I have created a simple alert that will display the Json results inside of an $http.get. I found a sample URL that points to Json data online for testing and I get the alert with the results just fine. But when I try to do this with my URL pointing back to the api, I get no results (not even an alert). However, when I take that same URL and put it into the browser, all of my Json data is there. Any ideas or thoughts on what might be causing this issue? Thanks.

JavaScript (with test Json data)

var myApp = angular.module('paladinMonitor', ["highcharts-ng"]);

myApp.controller('SizeCtrl', function ($scope, $http, $timeout) {
    $http.get('http://ip.jsontest.com/?callback=showMyIP').success(function (data, status) {
        alert(data)
    });
Tim
  • 952
  • 3
  • 12
  • 31
  • Check your javascript console to see if you are getting an error. `$http.get` has an error method as well as a success method that you could also use to alert you of an error. – Matthew Jaspers Apr 21 '15 at 14:11

2 Answers2

0

I had something similar happen to me. Restful web services must use the Access-Control-Allow-Origin header to specify what origins are allowed to access the service. Without it, you can hit the web service successfully by putting the address directly in your browser but it won't work from your app. If your REST service is written in Java, you can see this question for details on how to add the appropriate headers. Other languages will use a similar mechanism.

My other guess is that the web service requires authorization to access. It works fine from your browser because at one time you provided the proper credentials and your browser cached them. If your service does require authorization, see the "Setting HTTP Headers" section on this page for information on how to add the appropriate headers.

Community
  • 1
  • 1
Alvin Thompson
  • 5,388
  • 3
  • 26
  • 39
  • That's a good point. I am using C# but when I run with Fiddler I notice an error saying "No Proxy-Authorization Header is present." and "No Authorization Header is present." I think you are right about the server not allowing access from app. I will do a little more research and post follow up shortly. Thanks! – Tim Apr 21 '15 at 14:26
  • Yup, if that's the error you're getting, it's almost certain that's the problem. At a minimum you should add the `Access-Control-Allow-Origin` header, but probably also add `Access-Control-Allow-Methods`, `Access-Control-Allow-Headers`, and (if you're using credentials) `Access-Control-Allow-Credentials`. You can still use the post I mentioned to get the appropriate values. – Alvin Thompson Apr 21 '15 at 14:30
  • Does your web service require authentication/authorization? The first time you went to that domain in your web browser did it ask you for a password or some other authentication token? – Alvin Thompson Apr 21 '15 at 15:29
  • Yes it does. Also, I am not sure if that error message is exactly the issue causing the data not to work cross-domain but I think it would make sense based on what you are saying. In a nutshell, I think it boils down to CORS restricting data to be transfered from api(domain a) to client(domain b). The question now is the best way to authorize this when we are using a Json Web Token and Auth0. – Tim Apr 21 '15 at 15:43
  • If the web service requires authentication, the issue is more likely that and not the CORS issue. See the second part of my (edited) answer. – Alvin Thompson Apr 21 '15 at 15:46
  • So you are correct. I need to add the Access-Controls that you mentioned above. Question, where would I add this in my app? – Tim Apr 22 '15 at 17:37
  • I took some extensive time debugging through everything and finally narrowed it down to the exact same error you mentioned (good catch!). – Tim Apr 22 '15 at 17:37
  • You're saying it's the CORS issue or the authentication issue? If CORS it's probably actually both issues. – Alvin Thompson Apr 22 '15 at 17:43
  • If authentication, it depends on what type of authentication the server requires. For basic authentication, [this page](http://stackoverflow.com/questions/17959563/how-do-i-get-basic-auth-working-in-angularjs) should get you going. – Alvin Thompson Apr 22 '15 at 17:52
  • If CORS, you have to add the appropriate headers to the server's response. How that's done depends on the server software. I'm only familiar with Java REST services so you're on your own for anything else. However, the header values would still be as I mentioned. – Alvin Thompson Apr 22 '15 at 17:55
0

As Alvin Thompson mentioned, you have to set your access-control-allow origin and should also set your access-control-allow-headers, access-control-allow-credentials on the server side. In my case I had to do this in my WebAPIcontroller. This is because in order for CORS to work (cross-domain) you have to have the service 1 (RESTApi in my case) allow permissions for service 2(client) to receive call it. In order, to allow this I had to add the following NuGet packages

NuGet

-   Microsoft.AspNet.Cors NuGet package
-   Microsoft.Owin.Cors NuGet package

Once these were installed I went to my config file on the API project and added

API App_Start/WebApiConfig.cs

    public static void Register(HttpConfiguration config)
    {
        config.EnableCors();
    }

Then in my controller that inherits the API controller I referenced the NuGet package I installed and enabled CORS on the client side and this is where you set you origin, headers and methods

YourController : ApiController

namespace YourNamespace.Controllers
{
     [EnableCors(origins: "https://localhost:.....", headers: "*", methods: "*")]
        public class YourController : ApiController
        {
            //The rest of your controller functionality
        }
}

The rest of the issue I was having was how the Json Web Token variable is being passed into my javascript file. I am still working on this, I will post the answer to this as well when I figure it out.

To read more about the CORS issue, this was the best reference for me: http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

Tim
  • 952
  • 3
  • 12
  • 31