Không thể kết nối với localhost từ tiện ích mở rộng của Chrome

Question

Tôi đang làm việc trên tiện ích mở rộng của Chrome theo dõi thời gian và sử dụng Google App Engine cho chương trình phụ trợ.

Để thử nghiệm, tôi đang cố gắng kết nối phiên bản tiện ích mở rộng cục bộ với phiên bản cục bộ của ứng dụng App Engine. Khi tôi cố gắng để gửi một yêu cầu POST, tôi nhận được:

XMLHttpRequest cannot load http://localhost:8080/report . Origin chrome-extension://mbndmimplohfkkcincjodnfpaapbbmei is not allowed by Access-Control-Allow-Origin.

Nhưng nó hoạt động khi tôi thay đổi địa chỉ URL để nó đăng tải vào URL appspot.com.

Access-Control-Allow-Origin là gì và tại sao nó ngăn tôi nhận kết quả từ máy chủ cục bộ?

Answer 1

Tôi tin rằng điều này là do bạn không thể thực hiện cuộc gọi đến máy chủ không được bao gồm trong phần quyền của tệp kê khai. Phần quyền của manifest.json sẽ trông giống như sau:

"permissions": [ 
    "http://myapp.appspot.com/*", 
    "http://localhost/*" 
] 

Lưu ý, tôi chưa thử nghiệm điều này, nhưng có vẻ như đó là vấn đề của bạn.

Answer 2

bạn không thể thêm cổng trong quyền. Bạn phải sử dụng cổng 80 cho các tiện ích trong tệp kê khai quyền. Tôi thường chạy nginx và định tuyến tất cả lưu lượng truy cập từ các tiện ích mở rộng đến cổng 80.

Answer 3

tôi đã có thể nhận được mã này để làm việc:

var loginPayload = {}; 
loginPayload.username = document.getElementById('username').value; 
loginPayload.password = document.getElementById('password').value; 
console.log(loginPayload); 

var callback = function (response) { 
    console.log(response); 
}; 
var handle_error = function (obj, error_text_status){ 
    console.log(error_text_status + " " + obj); 
}; 

$.ajax({ 
    url: 'https://127.0.0.1:8443/hello', 
    type: 'POST', 
    success: callback, 
    data: JSON.stringify(loginPayload), 
    contentType: 'application/json', 
    error: handle_error 
}); 

EDIT:
Rõ ràng ai đó đã không như thế này, do đó, một số điều cần lưu ý:

1. Đối với phần mở rộng phải hoạt động trên https, đảm bảo máy chủ của bạn đang phục vụ https.
2. Trái với bài viết ở trên, phần mở rộng Chrome có thể phục vụ trên các cổng khác ngoài cổng 80/443

Answer 4

Bạn thể cổng sử dụng tùy chỉnh.

manifest.json

"permissions": ["http://localhost/*"] 

background.js (sử dụng jQuery)

$.post('http://localhost:5000/some-endpoint');