CORS: vé xem trước, yêu cầu chính hoàn thành w/200, nhưng trình duyệt vẫn có lỗi Xuất xứ

Question

Tôi gửi yêu cầu ajax CORS tới máy chủ nút đang chạy nhanh. Trong cả hai nhật ký máy chủ và giao diện điều khiển js, tôi có thể thấy rằng yêu cầu OPTIONS preflight thành công.

Sau đó, yêu cầu chính cũng thành công trên máy chủ và phản hồi với 200 và những gì tôi nghĩ là các tiêu đề chính xác. Tuy nhiên, trong Chrome, tab mạng báo cáo yêu cầu thứ hai là "bị hủy" và phản hồi không được chấp nhận hoặc xử lý:

XMLHttpRequest không thể tải http://myserver.com/upload. Xuất xứ http://mysite.com không được cho phép bởi Access-Control-Allow-Origin.

Dưới đây là các bản ghi máy chủ với các tiêu đề được in ra cho cả hai yêu cầu và trả lời:

76.79.201.210 - - [27/Jun/2013:23:23:17 +0000] "OPTIONS /upload HTTP/1.1" 204 0 "http://mysite.com/add" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36" 
START 
{ host: 'localhost:5001', 
    connection: 'close', 
    'content-length': '109587', 
    origin: 'http://mysite.com', 
    'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36', 
    'content-type': 'multipart/form-data; boundary=----WebKitFormBoundaryBZA4TATeeVWMHArH', 
    accept: '*/*', 
    referer: 'http://mysite.com/add', 
    'accept-encoding': 'gzip,deflate,sdch', 
    'accept-language': 'en-US,en;q=0.8' } 
{ 'x-powered-by': 'Express', 
    'access-control-allow-origin': '*', 
    'access-control-allow-methods': 'GET, POST, PUT, DELETE, OPTIONS', 
    'access-control-allow-headers': 'X-Requested-With' } 
XX.XX.XXX.210 - - [27/Jun/2013:23:23:19 +0000] "POST /upload HTTP/1.1" 200 118 "http://mysite.com/add" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36" 
- - - [Thu, 27 Jun 2013 23:23:19 GMT] "POST /upload HTTP/1.0" 200 - "http://mysite.com/add" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36" 

Cập nhật: ảnh chụp màn hình từ tab mạng của Chrome - những "hủy" một là một trong những điều đó là một 200 trên

http://cl.ly/image/3c09330i1a17

vấn đề

Answer 1

Vì vậy, hóa ra bởi vì tôi có cả nginx và được thiết lập để phản hồi với tiêu đề yêu cầu tùy chọn, bằng cách nào đó kết hợp giá trị tiêu đề Access-Control-Allow-Origin thành "", "". Tôi không biết nếu nó đọc như một mảng hay cái gì.

Vẫn còn khá khó hiểu vì 1) Tại sao yêu cầu chuyển qua nginx? và 2) Tại sao trình duyệt tiếp tục với POST nếu tiêu đề OPTIONS bị sai lệch?

Ồ, bài học, như thường lệ - Đừng lặp lại chính mình.

Answer 2

đáp thắc mắc CORS-Related

• Nếu bạn đang cố gắng để tạo lại vấn đề, và bạn không nhìn thấy một request/response, có thể là trình duyệt của bạn đã được lưu trữ một nỗ lực yêu cầu preflight trước thất bại. Xoá bộ nhớ cache của trình duyệt của bạn cũng có thể xóa bộ nhớ cache preflight ...

https://developers.google.com/storage/docs/cross-origin

Tôi đã thử nghiệm cấu hình sau đây trên test-cors.org và nó xuất hiện để làm việc. Chỉ cần nhớ để xóa bộ nhớ cache của bạn mỗi bây giờ và sau đó trong khi bạn đang xử lý sự cố.

var allowedHost = { 
    // this is the origin that test-cors.org uses 
    'http://client.cors-api.appspot.com': true 
}; 

var allowCrossDomain = function(req, res, next) { 
    if (!req.headers.origin || allowedHost[req.headers.origin]) { 
     res.header('Access-Control-Allow-Credentials', true); 
     res.header('Access-Control-Allow-Origin', req.headers.origin) 
     res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS'); 
     res.header('Access-Control-Allow-Headers', 'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'); 
     if (req.method == 'OPTIONS') res.send(200); 
     else next(); 
    } 
    else { 
     res.send(403, { 
      auth: false 
     }); 
    } 
} 

Chúc may mắn!