CORS chết người khi http: // localhost là nguồn gốc

Question

Tôi bị kẹt với vấn đề CORS này, mặc dù tôi đặt máy chủ (nginx/node.js) với các tiêu đề thích hợp.

tôi có thể nhìn thấy trong cửa sổ Mạng Chrome -> Tiêu đề phản hồi:

Access-Control-Allow-Origin:http://localhost 

mà nên làm các trick.

Dưới đây là đoạn code mà bây giờ tôi sử dụng để kiểm tra:

var xhr = new XMLHttpRequest(); 
xhr.onload = function() { 
    console.log('xhr loaded'); 
}; 
xhr.open('GET', 'http://stackoverflow.com/'); 
xhr.send(); 

tôi nhận được

XMLHttpRequest cannot load http://stackoverflow.com/. Origin http://localhost is not allowed by Access-Control-Allow-Origin. 

tôi nghi ngờ đó là một vấn đề trong kịch bản client và không cấu hình máy chủ ...

Answer 1

Chrome does not support localhost for CORS requests (lỗi mở từ năm 2010).

Để giải quyết vấn đề này, bạn có thể sử dụng tên miền như lvh.me (điểm 127.0.0.1 giống như localhost) hoặc bắt đầu chrome với cờ --disable-web-security (giả sử bạn chỉ đang thử nghiệm).

Answer 2

Vấn đề thực sự là nếu chúng tôi đặt -Allow- cho tất cả yêu cầu (OPTIONS & POST), Chrome sẽ hủy nó. Các mã sau đây làm việc cho tôi với POST để localhost với Chrome

<?php 
if (isset($_SERVER['HTTP_ORIGIN'])) { 
    //header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}"); 
    header("Access-Control-Allow-Origin: *"); 
    header('Access-Control-Allow-Credentials: true');  
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS"); 
} 
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') { 
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'])) 
     header("Access-Control-Allow-Methods: GET, POST, OPTIONS");   
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS'])) 
     header("Access-Control-Allow-Headers:{$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}"); 

    exit(0); 
} 
?> 

Answer 3

mỗi @ câu trả lời Beau của, Chrome không hỗ trợ CORS localhost yêu cầu, và ít có khả năng có sự thay đổi theo hướng này.

Tôi sử dụng số Allow-Control-Allow-Origin: * Chrome Extension để khắc phục sự cố này. Tiện ích mở rộng sẽ thêm Tiêu đề HTTP cần thiết cho CORS:

Access-Control-Allow-Origin: * 
Access-Control-Allow-Methods: "GET, PUT, POST, DELETE, HEAD, OPTIONS" 
Access-Control-Expose-Headers: <you can add values here> 

source code is published on Github.

Lưu ý rằng bộ lọc mở rộng tất cả các URL theo mặc định. Điều này có thể phá vỡ một số trang web (ví dụ: Dropbox). Tôi đã thay đổi nó để lọc chỉ localhost URL với bộ lọc URL sau

*://localhost:*/*