2

Below is part of my web api project.

public class TriviaController : ApiController
{        
    public HttpResponseMessage Get()
    {
        QuestionAnswer _QuestionAnswer = new QuestionAnswer();
        TriviaQuestion _TriviaQuestion = _QuestionAnswer.GetQuestion("test@yahoo.com");
        return Request.CreateResponse(HttpStatusCode.OK, _TriviaQuestion);
    }    
}

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        EnableCrossSiteRequests(config);
        AddRoutes(config);
    }

    private static void AddRoutes(HttpConfiguration config)
    {
        config.Routes.MapHttpRoute(
            name: "Default",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }

    private static void EnableCrossSiteRequests(HttpConfiguration config)
    {
        var cors = new EnableCorsAttribute(
            origins: "*",
            headers: "*",
            methods: "*");
        config.EnableCors(cors);
    }
}

My client application receive json data which returned by contoller. Everything working correct until I modify to specific origins like below.

var cors = new EnableCorsAttribute(
            origins: "https://jsfiddle.net/", //"https://localhost:44304/",
            headers: "*",
            methods: "*");

After that, my client application receive only null value and error message saying Status Code 0.
According to this reference link, I know that it is because of CORS.

Below is my client code. It is so simple.

alert("*");
$.getJSON("https://localhost:44300/api/trivia", function(data) {
  alert(JSON.stringify(data));
})
.done(function() { alert('getJSON request succeeded!'); })
.fail(function(jqXHR, textStatus, errorThrown) { 
alert('getJSON request failed! ' + textStatus + ' :: ' + jqXHR + ' :: ' + errorThrown); 

$.each(jqXHR, function(k, v) {
    //display the key and value pair
    alert(k + ' is ' + v);
});

})
.always(function() { alert('getJSON request ended!'); });

To see on jsFiddle, click here.

So my question is,
Is it possible to set allow origin using SSL? If so what am I doning wrong?

Community
  • 1
  • 1
Frank Myat Thu
  • 4,448
  • 9
  • 67
  • 113
  • 2
    Yes, it's definitely possible to allow origins using SSL. Try removing the last forward slash `/` from `EnablesCorsAttribute` origins. – boosts Jul 08 '15 at 03:48
  • Thank you @boosts, you are correct, I removed `/` , then I can call using `https://localhost:portno`. But I still don't know why external url like jsfiddle still cannot. May be I am using IIS express which does not have domain and only have untrusted SSL Cert. More suggestion please! – Frank Myat Thu Jul 08 '15 at 04:47

1 Answers1

2

Try adding the origins separately. Use Developer Tools in your browser to make sure that the origins match exactly to what you intend them to be.

var cors = new EnableCorsAttribute("https://localhost:portno", "*", "*"); // local
cors.Origins.Add("https://jsfiddle.net");  // jsfiddle

config.EnableCors(cors);
boosts
  • 605
  • 1
  • 7
  • 15
  • Thank you @boosts, +1 vote for your great suggestion `Use Developer Tools in your browser to make sure that the origins match exactly to what you intend them to be`. Actually `jsfiddle.net` use `https://fiddle.jshell.net`. Finally, I can solve it using your suggestion. – Frank Myat Thu Jul 09 '15 at 01:54
  • `var cors = new EnableCorsAttribute( origins: "https://fiddle.jshell.net,https://localhost:44303", headers: "*", methods: "*");` – Frank Myat Thu Jul 09 '15 at 01:55