1

I want to transition an existing website to a SPA with REST support from WebApi 2. I don't want to have the services be part of my existing project but I would like to be able to make requests from JavaScript to my Web API layer. It would be nice if I could use api.mywebsite.com but browsers will block the cross domain request.

Instead, I am assuming I'll have to add something to hijack a specific route like: mysite.com/api/*. What is the correct way of doing this? I can't seem to find any resources that talk about doing something like this.

I am trying create something like this with a single page application. I want to call directly into the web api from my client though.

.net framework orginization

Walt
  • 1,521
  • 2
  • 13
  • 29
  • Is the site you are adding the API project to an MVC web site? – snowYetis Mar 06 '14 at 20:22
  • So I was planning on just creating an empty Web Api 2 project and hosting that on a server. The website that I have, which I want to point to it is a .net Webforms app. – Walt Mar 06 '14 at 20:29
  • Sounds like you are there. Maybe, I am misunderstanding your post, but would you not be able to make requests to the WebAPI from your WebForm app? – snowYetis Mar 06 '14 at 22:23
  • I would be able to from the WebForm layer. I was hoping to make requests directly from JavaScript and skip the WebForm layer. In order to do that I have to have some type of forwarder or proxy. I don't know what the best solution is? Am I getting that part of the architecture wrong? – Walt Mar 07 '14 at 00:00
  • You can definitely do this with Javascript. I believe you can do this easily by using AJAX... If the sites are on different domains then you would want to use JSONP for cross domain requests. Make a AJAX Get request. Your URL would look something like... url: 'http://localhost:6606/api/values/GetTest' Is this answering your question? I can elaborate more in answer form, if so. – snowYetis Mar 07 '14 at 03:10
  • I am not sure what the best practice is in this situation. I think it would be cleaner to put the rest api on a subdomain but also not super familiar with JSONP. Could you explain further in an answer? – Walt Mar 07 '14 at 04:31

2 Answers2

2

If you want to separate Service and application you have a few choices:

  1. Use JSONP. It only supports GET requests. It can work if your application does occasional GET requests to some public api (like twitter), but it's not good for data-centric application with many Restfull or RPC style requests.

  2. Use CORS. It is a W3C standard that allows a server to relax the same-origin policy. Using CORS, a server can explicitly allow some cross-origin requests while rejecting others. One drawback of this option is that it supports only IE10+. See more CORS browse support. Enabling Cross-Origin Requests in ASP.NET Web API.

  3. Separate you application and service, but host them under the same domain.

Community
  • 1
  • 1
Erikas Pliauksta
  • 1,402
  • 1
  • 14
  • 22
  • What do typical implementations of option 3 look like? That's what I was looking to do. Is there some special configuration in IIS? Do I have to then write some kind of proxy in my web app? – Walt Mar 07 '14 at 16:31
  • 1
    If you are hosting you web site in IIS, you can right click on the web site and select add application, point to your web api service – Erikas Pliauksta Mar 07 '14 at 17:38
1

So, you have your WebAPI on one domain and your single page app on another. Here is an example of how you can call your WebAPI actions from the single page JS app.

WebAPI

public Book GetBook(int id)
{
    Book book = _repository.Get(id);
    if (book == null)
    {
        throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.NotFound));`
    }
    return book;
}

Above is your WebAPI method. I am assuming you already have all of that taken care of. Below is the AJAX code that will call your API method.

$.ajax({
    url: 'http://myurl.com/<controllerName>/GetBook',
    type: 'GET',
    dataType: 'jsonp',
    success: function (data) {
        alert(data.msg);
    }
})

I believe that is all you will need. You can use Fiddler to view the data exchange. The output will be in JSON.

Community
  • 1
  • 1
snowYetis
  • 1,517
  • 16
  • 28
  • That would work great for public get requests but it looks like what Erikas said is true and it only supports get. I need it to support all the REST verbs. – Walt Mar 07 '14 at 16:32
  • 2
    I will let Erikas answer the question, but I think all you would need to do is go into IIS and add it to your App Pool. I think you can even treat it as a Sub App of the main application. – snowYetis Mar 07 '14 at 16:59