CORS with Dart, how do I get it to work?

Question

Just started tinkering with Dart and I decided to write a simple Http Server and a client. My server code:

#import("dart:io");

final HOST = "127.0.0.1";
final PORT = 8080;
final LOG_REQUESTS = true;

void main() {
  HttpServer server = new HttpServer();
  server.addRequestHandler((HttpRequest request) => true, requestReceivedHandler);
  server.listen(HOST, PORT);
  print("Server is running on ${PORT}."); 
}

void requestReceivedHandler(HttpRequest request, HttpResponse response) {
  var pathname = request.uri;
  var apiresponse="";
  if (LOG_REQUESTS) {
    print("Request: ${request.method} ${pathname}");
  }
  if(pathname == '/api'){
    response.headers.set(HttpHeaders.CONTENT_TYPE, "text/plain; charset=UTF-8");
    response.headers.add("Access-Control-Allow-Methods", "POST, OPTIONS, GET");
    response.headers.add("Access-Control-Allow-Origin", "*");
    response.headers.add('Access-Control-Allow-Headers', '*');
    print('welcome to the good life');
    response.outputStream.writeString("API Call");
    response.outputStream.close();
  }
}

My client code:

#import('dart:html');
#import('dart:json');

class dartjson {

  dartjson() {
  }

  void run() {
    write("Hello World!");
  }




  void fetchFeed(){
    XMLHttpRequest xhr = new XMLHttpRequest();
    var url = "http://127.0.0.1:8080/api";
    xhr.open("GET", url, true);
    xhr.setRequestHeader('Content-Type', 'text/plain');
    //xhr.setRequestHeader('Access-Control-Request-Headers', 'http://127.0.0.1:3030');
    xhr.send();
    print(xhr.responseText);
    document.query('#status').innerHTML = xhr.responseText;

  }



void main() {
  new dartjson().fetchFeed();
}

I keep getting the error:

XMLHttpRequest cannot load http://127.0.0.1:8080/api. Origin
http://127.0.0.1:3030 is not allowed by Access-Control-Allow-Origin.

What I'm I doing wrong?

have you seen those 2 links? http://blog.sethladd.com/2012/03/jsonp-with-dart.html https://groups.google.com/a/dartlang.org/group/misc/browse_thread/thread/e93a2b0e205bd5d1/605a7ef152f96e7b?lnk=gst&q=CORS#605a7ef152f96e7b — Gero, May 07 '12 at 10:44
`*` is not a valid value for anything except `Access-Control-Allow-Origin`; and it is not even valid for the origin field if the request is preflighted (which is the case if you uncomment the `Access-Control-Request-Headers` line - though it does not make much sense, the value should be a list of header names). — Tgr, May 07 '12 at 11:25
I've got CORS working with the `Access-Control-Allow-Origin` property just the way you tried. Correct the other values and it should work fine. — enyo, Jun 05 '13 at 11:56

score 10 · Answer 1 · edited Mar 15 '14 at 14:11

Was facing the same problem. Below is my server code. It just prints the query parameters. Added access control headers to fix the issue.

    HttpServer.bind('127.0.0.1', 8080).then((server){
    server.listen((HttpRequest request){     
      request.uri.queryParameters.forEach((param,val){
        print(param + '-' + val);
      });

      request.response.headers.add("Access-Control-Allow-Origin", "*");
      request.response.headers.add("Access-Control-Allow-Methods", "POST,GET,DELETE,PUT,OPTIONS");

      request.response.statusCode = HttpStatus.OK;
      request.response.write("Success!");
      request.response.close();
    });
  });

Hope this helps.

score 3 · Accepted Answer · answered May 09 '12 at 06:25

you could simplify your life and run both server/client scripts from the same host:port address. There is a small webserver example at http://www.dartlang.org/articles/io/#web-servers that serves static files too. Add your '/api' handler and make sure your client files are in the same directory. The example server is a lot slower than the Dart Editor builtin server that runs on port 3030.

score 1 · Answer 3 · edited Mar 29 '21 at 14:10

1

here is my solution:

request.response.headers.add("Access-Control-Allow-Origin", "*");
request.response.headers.add("Access-Control-Allow-Headers", "*");
request.response.headers.add("Access-Control-Allow-Methods", "POST,GET,DELETE,PUT,OPTIONS");

edited Mar 29 '21 at 14:10

Alon Eitan

11,997
8
49
58

answered Mar 29 '21 at 14:08

Rithea

19
2

CORS with Dart, how do I get it to work?

3 Answers3

Linked