Не удается подключиться к localhost из расширения Chrome

#google-app-engine #google-chrome-extension #localhost

Вопрос:

Я работаю над расширением Chrome, которое отслеживает время и использует Google App Engine для серверной части.

Для тестирования я пытаюсь подключить локальную версию расширения к локальной версии приложения App Engine. Когда я пытаюсь отправить запрос POST, я получаю:

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

Но это работает, когда я меняю URL-адрес, чтобы он отправлял на appspot.com URL-АДРЕС.

Что такое Access-Control-Allow-Origin и почему это мешает мне получать результаты от localhost?

Ответ №1:

Я полагаю, это связано с тем, что вы не можете совершать вызовы на сервер, который не включен в раздел разрешений вашего манифеста. Раздел разрешений manifest.json должен выглядеть примерно так:

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

Обратите внимание, я не тестировал это, но похоже, что именно в этом заключается ваша проблема.

1. Небольшая поправка. Вы можете отправлять запросы, даже если этого нет в разрешениях, но если CORS не настроен на разрешение этого на сервере, произойдет сбой.

2. Я уже настроил разрешение для localhost, но оно все еще не работает. Кто-нибудь может помочь?

3. @DmitryMinkovsky приходилось ли вам настраивать или делать что-либо с CORS? Достаточно ли добавить localhost в разрешения?

Ответ №2:

Вы можете использовать пользовательские порты.

manifest.json

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

background.js (используя jQuery)

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

Ответ №3:

вы не можете добавлять порты в пределах разрешений. Вы должны использовать порт 80 для расширений в манифесте разрешений. Обычно я запускаю nginx и перенаправляю весь трафик с моих расширений на порт 80.

1. Это мое первое расширение, поэтому я действительно не знаю, что я делаю. Как мне это сделать?

2. Принятый ответ правильный. Я добавил "http://localhost/*" разрешения, и теперь я могу выполнить Ajax GET to: 8080.

3. Спасибо @rane, приятно знать.

Ответ №4:

Я смог заставить этот код работать:

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

Редактировать:
Видимо, кому-то это не понравилось, поэтому следует иметь в виду несколько вещей:

Для расширений, которые должны работать на https, убедитесь, что ваш сервер обслуживает https.
Вопреки сообщениям выше, расширения Chrome МОГУТ работать на портах, отличных от порта 80/443

Ответ №5:

если вам нужен общий подход к локальному хостингу

 *://localhost:*/*