CORS với Dart, làm thế nào để nó hoạt động?

Question

Chỉ cần bắt đầu mày mò với Dart và tôi quyết định viết một máy chủ Http đơn giản và một khách hàng. mã máy chủ của tôi:

#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(); 
    } 
} 

mã khách hàng của tôi:

#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(); 
} 

tôi tiếp tục nhận được lỗi:

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. 

tôi tôi làm gì sai?

Answer 1

bạn có thể đơn giản hóa cuộc sống của mình và chạy cả tập lệnh máy chủ/ứng dụng khách từ cùng một máy chủ: địa chỉ cổng. Có một ví dụ về máy chủ web nhỏ tại http://www.dartlang.org/articles/io/#web-servers cũng phục vụ các tệp tĩnh. Thêm trình xử lý '/ api' của bạn và đảm bảo tệp khách hàng của bạn nằm trong cùng một thư mục. Máy chủ mẫu chậm hơn rất nhiều so với máy chủ tích hợp Dart Editor chạy trên cổng 3030.

Answer 2

Đang đối mặt với cùng một vấn đề. Dưới đây là mã máy chủ của tôi. Nó chỉ in các tham số truy vấn. Đã thêm tiêu đề kiểm soát quyền truy cập để khắc phục sự cố.

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(); 
    }); 
    }); 

Hy vọng điều này sẽ hữu ích.