problems with dart-server/angulardart and CORS

Question

I am using dart on my server and angulardart as my client. I can request data via http.get on my server, that is working fine - but I can't get POST to work.

Server: (the server makes use of "Start" https://github.com/lvivski/start)

//runs at 127.0.0.1:4040:
server.post("/rest/qr").listen((request) {
  addCorsHeaders(request.response);
  request.payload().then((map) {
    print(map);
  }).then((_) {
    request.response.send("ok");
  });
});

Client (angular):

// runs at http://127.0.0.1:3030
final String _codesUrl = "http://127.0.0.1:4040/rest/qr";
_http.post(_codesUrl, JSON.encode(temp.toMap())).then((HttpResponse response) {
  print(response.status);
});

addCorsHeaders:

void addCorsHeaders(Response res) {
    res.header("Access-Control-Allow-Origin", "*, ");
    res.header("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");}

This is my code. As I already said, http.get from angular to my server does work. Post to my server via the angular http-service fail : "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '127.0.0.1:3030' is therefore not allowed access."

I also tried the advanced rest plugin in Google Chrome to make POST-request to that URL.These requests do work. Do I miss something on the angulardart POST-requests? Server and Client run on different ports.

Answer 1

I've run into this issue myself. Turns out that some CORS requests require a "preflight request". GET does not, but POST does. The following article explains all of this in detail:

http://www.html5rocks.com/en/tutorials/cors/#toc-adding-cors-support-to-the-server

The gist is that for a POST CORS request, the client will first send an "OPTIONS" request to the server, asking if a CORS POST is OK or not. This is the "preflight request" I mentioned previously. You need to catch it and respond back to it before you will get the POST.

I'm not sure how to answer OPTIONS requests with the Start framework, but the dartlang website has a tutorial on how to solve the exact problem with vanilla dart:

https://www.dartlang.org/docs/tutorials/forms/#handling-options-requests

The code to handle the OPTION requests (cribbed from the above article):

void handleOptions(HttpRequest req) {
  HttpResponse res = req.response;
  addCorsHeaders(res);
  print('${req.method}: ${req.uri.path}');
  res.statusCode = HttpStatus.NO_CONTENT;
  res.close();
 }