Setting up 'Access-Control-Allow-Origin' for HTTP Listener

Question

I wanted a solution to send data from a C# application to a Web Page once a request was made to the C# application (via a AJAX post from the web page), then using the project implemented here, I wrote a simple console application to listen for ajax posts. It works great - I click on a button on my page that fires a AJAX post to http://localhost:8081/, which is the port the HTTP Listener is listening on, then the Listener Callback responds with some data back to the web page and I can use the data in the success function of the ajax post.

My problem - I need to open my web page by using the URL http://localhost:8081/index.html which request the page from my IIS server, then only can I start my Listener and press the button to fire the AJAX because if I just keep my service running and navigate to the URL my page doesn't show up but instead the data my Listener returns and not page IIS should serve. This happens becuase the port my Listener is listening on is the same one IIS is binding to when serving my page. So I decided to keep my IIS binding on port 8081 and just change my Listener to Listen on 8083 instead and let my ajax post to 8083 as well, that way I can keep my IIS service separate from the posts I'm doing to get data.

Here is my listener config:

listener = new HttpListener();
listener.Prefixes.Add("http://localhost:8083/");
listener.Prefixes.Add("http://127.0.0.1:8083/");
listener.AuthenticationSchemes = AuthenticationSchemes.Anonymous;

And here is my AJAX Post

.ajax({
      type: "POST",
      url: 'http://localhost:8008/',
      data: test_data,
      crossDomain: true,
      dataType: 'json',
      success: function(data) {

        //Use data

      }
      });

This setup should work, only problem is when I now click the button I get the error XMLHttpRequest cannot load http://localhost:8083/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access. The response had HTTP status code 503., which is to be expected, but I do not how to fix it.

As Orkun Bekar pointed out, one can simply add crossDomain: true, and dataType: 'jsonp' to the ajax post, and that works, I can reach my Listener now, but I still get the No 'Access-Control-Allow-Origin' error when I try to send back some data.

Here is the part of my Listener call back that send back some data:

...
List<Byte> imgraw = File.ReadAllBytes(@"C:\Users\USER\Pictures\image.jpg").ToList();
string base64ImageRepresentation = Convert.ToBase64String(imgraw.ToArray());

byte[] imgDataArray = Encoding.ASCII.GetBytes("data:image/jpg;base64," + base64ImageRepresentation);
byte[] responseConfigArray = Encoding.ASCII.GetBytes("HTTP/1.1\r\nCache-Control: no-cache\r\nAccess-Control-Allow-Origin: *\r\n\r\n");

byte[] buffer = new byte[responseConfigArray.Length + imgDataArray.Length];
responseConfigArray.CopyTo(buffer, 0);
imgDataArray.CopyTo(buffer, responseConfigArray.Length);
        
var response = context.Response;
response.ContentLength64 = buffer.Length;
response.StatusCode = 200;
response.StatusDescription = "OK";
response.OutputStream.Write(buffer, 0, buffer.Length);
...

Answer 1

Instead of sending the data and the headers in the response.OutputStream, I added it in the response.Headers Property.

...
response.Headers.Add("Access-Control-Allow-Origin", "*");
response.Headers.Add("Access-Control-Allow-Methods", "POST, GET");
...

Answer 2

First you will create your response string including headers:

string responseConfigArray = "HTTP/1.1\r\nCache-Control: no-cache\r\nAccess-Control-Allow-Origin: *\r\n\r\n";
string imgDataArray = "data:image/jpg;base64," + base64ImageRepresentation;

Then convert it to byte array:

byte[] byteHttpHeaders = Encoding.UTF8.GetBytes(responseConfigArray);
byte[] concat = new byte[byteHttpHeaders.Length + imgDataArray.Length];

Buffer.BlockCopy(byteHttpHeaders, 0, concat, 0, byteHttpHeaders.Length);
Buffer.BlockCopy(imgDataArray, 0, concat, byteHttpHeaders.Length, imgDataArray.Length);

And send response data to web:

var response = context.Response;
response.ContentLength64 = concat.Length;
response.StatusCode = 200;
response.StatusDescription = "OK";
response.OutputStream.Write(concat, 0, concat.Length);