dart：HTTPRequest在JS中不起作用，但仅在Dartium中起作用

Question

The following code works in Dartium, but not when converted to JavaScript in a browser:

import 'dart:html';

var getReq = "http://127.0.0.1:8080/programming-languages";

void main() {
  HttpRequest.getString(getReq).then((results) {
    query("#text").text = results;
  }).catchError((e) {
    print("Oops! Encountered $e");
  });
}

The error returned is:

ERROR: Instance of 'Interceptor'

I'm following the JSON Web Service tutorial, the git repo for the complete source is dartlang_json_webservice .

I'm using Dart SDK version 0.7.2.1_r27268.

Answer 1

Your code works for me both in Dartium and Chrome.

However, I get precisely the same error when I turn off the server. I checked the console in chrome:

XMLHttpRequest cannot load http://127.0.0.1:8080/programming-languages. 
Origin http://127.0.0.1:3030 is not allowed by Access-Control-Allow-Origin. 
testhttpreq.html:1 Oops! Encountered Instance of 'Interceptor' 

This is error similar to what you receive if you run this program in dart

XMLHttpRequest cannot load http://127.0.0.1:8080/programming-languages. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://127.0.0.1:3030' is therefore not allowed access.
Oops! Encountered Instance of 'HttpRequestProgressEvent'

with the generated toString in JavaScript (receiver being HttpRequestProgressEvent):

$.toString$0 = function(receiver) {
 return $.getInterceptor(receiver).toString$0(receiver);
};

Answer 2

The problem is the server is returning a CORS header which is not working:

/**
 * Add Cross-site headers to enable accessing this server from pages
 * not served by this server
 * 
 * See: http://www.html5rocks.com/en/tutorials/cors/ 
 * and http://enable-cors.org/server.html
 */
void addCorsHeaders(HttpResponse res) {
  res.headers.add("Access-Control-Allow-Origin", "*, ");
  res.headers.add("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
  res.headers.add("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
}

Replacing:

res.headers.add("Access-Control-Allow-Origin", "*, ");

with:

res.headers.add("Access-Control-Allow-Origin", "*");

works. See Origin is not allowed by Access-Control-Allow-Origin for futher information.