How to POST to a Web API2 Cors enabled server from another Domain with a jquery client

Question

I have seen similar posts to the following, and also made similar (but slightly different) myself. I have tried to include all information here while keeping as simple as possible.

I started playing with Web API version 1, and now am looking at version 2 that has the built in Cors support, which I thought great (as I have had trouble with Cors before)

In Dev studio 2013 I created a stock MVC Web-Api project, and included the following line in the WebApiConfig.Register..

public static class WebApiConfig
{
  public static void Register(HttpConfiguration config)
  {
    config.EnableCors(new EnableCorsAttribute("*", "*", "*"));    
    ...

To test, I have created a simple HTML client with the following script..

$(document).ready(function() {
    $.support.cors = true;

    $.ajaxSetup({
      cache: false
    });

....

function postdata() {

  var data = {
        s1: 'test',
        s2: 'test2'
      };

  $.ajax({
   url: url,
   data: data,
   type: "POST",                                    
   datatype: 'application/json'})   
     ....

I tested this script on the same machine as the Web API service is running, and it ran fine.. a breakpoint was hit in the server method, and the success call was called.

I then wanted to test this on another machine our our network (in fact it is plugged into the same switch as my machine running the server)

I used tcping to make sure I could access the port on the server running the web-api service (which I could)

Running on this other machine, I now get the following error showing up in the Chrome console (i've just removed my ip and route)

XMLHttpRequest cannot load http://<myip>:62594/<myroute>. 
No      'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'null' is therefore not allowed access.

In fiddler raw view (on the client machine), I see the following request

POST http://<serverip>:62594/<my route> HTTP/1.1
Host: <serverpp>:62594
Connection: keep-alive
Content-Length: 68
Accept: */*
Origin: null
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)     Chrome/33.0.1750.154 Safari/537.36
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-GB,en-US;q=0.8,en;q=0.6

s1=test&s2=test2

and the following response..

HTTP/1.1 400 Bad Request
Content-Type: text/html; charset=us-ascii
Server: Microsoft-HTTPAPI/2.0
Date: Mon, 17 Mar 2014 03:55:55 GMT
Connection: close
Content-Length: 334

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<HTML><HEAD><TITLE>Bad Request</TITLE>
<META HTTP-EQUIV="Content-Type" Content="text/html; charset=us-ascii"></HEAD>
<BODY><h2>Bad Request - Invalid Hostname</h2>
<hr><p>HTTP Error 400. The request hostname is invalid.</p>
</BODY></HTML>

On the server machine I see nothing in fiddler, and or course my api method is not being called.

I added the following to the headers to the ajax call

 $.ajax({
        url: url,
        data: data,
        type: "POST",               
        headers: { 'Access-Control-Allow-Origin' : '*',
                   'Origin' : <my client ip>},          
        datatype: 'application/json'})

Now the Chrome console shows.

 Refused to set unsafe header "Origin" jquery-2.0.2.min.js:6
 OPTIONS http://<serverip>:62594/<my route> 400 (Bad Request) jquery- 2.0.2.min.js:6
 OPTIONS http://<serverip>:62594/<my route> No 'Access-Control-Allow-    Origin' header is present on the requested resource. Origin 'null' is therefore not allowed  access. jquery-2.0.2.min.js:6
XMLHttpRequest cannot load http://<my server ip>:62594/<my route>. No   'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

And in the client fiddler I see the following request...

OPTIONS http://<my server ip>:62594/<my route> HTTP/1.1
Host: <my server ip>:62594
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: null
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)     Chrome/33.0.1750.154 Safari/537.36
Access-Control-Request-Headers: access-control-allow-origin, accept, content-type
Accept: */*
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-GB,en-US;q=0.8,en;q=0.6

And the following in the responce..

HTTP/1.1 400 Bad Request
Content-Type: text/html; charset=us-ascii
Server: Microsoft-HTTPAPI/2.0
Date: Mon, 17 Mar 2014 05:47:12 GMT
Connection: close
Content-Length: 334

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML  4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<HTML><HEAD><TITLE>Bad Request</TITLE>
<META HTTP-EQUIV="Content-Type" Content="text/html; charset=us-ascii"></HEAD>
<BODY><h2>Bad Request - Invalid Hostname</h2>
<hr><p>HTTP Error 400. The request hostname is invalid.</p>
</BODY></HTML>

I have no idea why in fiddler it report bad hostname, and when I try to set the Origin (which it was complaining about) it would not let me (so it is still null)

Does anyone have any idea how I can use jquery to make such a call? Should this be possible at all, and if so, what syntax do I need to use (an exact sample call would be great), or are there some other browser settings that need to be set?

Any information here would be hugely appreciated!

Thanks in advance, Peter

score 0 · Answer 1 · answered Mar 17 '14 at 06:40

Just as I was looking for some more information to add (like the fact that I am running my server from within dev studio), I found my problem!

I noticed I was running under IIS express, so (not knowing too much about IIS express vs IIS, I change the Server to Local IIS, where it created a virtual directory of http:///WebApiTestRoutes

I then used the following in my routes..

http://<serverip>/WebApiTestRoutes/<my route>

Note no port. Also, I didn't need any headers in the ajax call, I just use

$.ajax({
        url: url,
        data: data,
        type: "POST",                               
        datatype: 'application/json'})

All works fine on the remote machine now!

I left this post here just in case any one else does not think about the same thing when testing (ie iis express vs iis local), as for a newbie this stumped me for days!

How to POST to a Web API2 Cors enabled server from another Domain with a *jquery* client

1 Answers1

How to POST to a Web API2 Cors enabled server from another Domain with a jquery client