title: Setting up 'Access-Control-Allow-Origin' for HTTP Listener
body: <p>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 <a href="http://www.codeproject.com/Articles/599978/An-HttpListener-Server-for-Handling-AJAX-POST-Requ" rel="nofollow noreferrer">here</a>, 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 <code>http://localhost:8081/</code>, 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. </p>
  
  <p>My problem - I need to open my webpage by using the URL <code>http://localhost:8081/index.html</code> 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 doesnt 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 <code>8081</code> and just change my Listener to Listen on <code>8083</code> instead and let my ajax post to <code>8083</code> as well, that way I can keep my IIS service separate from the posts I'm doing to get data.</p>
  
  <p>Here is my listener config:</p>
  
  <pre><code>listener = new HttpListener();
  listener.Prefixes.Add("http://localhost:8083/");
  listener.Prefixes.Add("http://127.0.0.1:8083/");
  listener.AuthenticationSchemes = AuthenticationSchemes.Anonymous;
  </code></pre>
  
  <p>And here is my AJAX Post</p>
  
  <pre><code>.ajax({
        type: "POST",
        url: 'http://localhost:8008/',
        data: test_data,
        crossDomain: true,
        dataType: 'json',
        success: function(data) {
  
          //Use data
  
        }
        });
  </code></pre>
  
  <p>This setup should work, only problem is when I now click the button I get the error <code>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.</code>, which is to be expected, but I do not how to fix it.</p>
  
  <p>As <a href="https://stackoverflow.com/users/4140498/orkun-bekar">Orkun Bekar</a> 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 <code>No 'Access-Control-Allow-Origin'</code> error when I try to send back some data.</p>
  
  <p>Here is the part of my Listener call back that send back some data:</p>
  
  <pre><code>...
  List&lt;Byte&gt; 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);
  ...
  </code></pre>