Извлекать http://localhost:3001 / из расширения Chrome с помощью React

#reactjs #mongodb #cors #azure-cosmosdb

#reactjs #mongodb #cors #azure-cosmosdb

Вопрос:

Я видел несколько похожих проблем и решений, когда люди хотят нажать http://localhost:3001/some_url и использовать cors для этого.

Но моя проблема немного в другом. Мое веб-приложение — это не веб-сайт, а веб-расширение.

ПОКА я не могу найти способ извлечения из http://localhost:3001/url даже при использовании cors.

То, что я пробовал, это:

Сервер:

 const cors = require("cors");
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.use(
  cors({
    origin: "http://localhost:3001/url" // restrict calls to those this address
    
  })
);
  

В background.js файле:

 create(urls){
    console.log(urls);
    return new Promise((resolve, reject) =>{
      fetch('https://cors-anywhere.herokuapp.com/' 'http://localhost:3001/url', {
        method: 'POST',
        body: JSON.stringify(urls),
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
          "Access-Control-Allow-Origin: *"
        }
      })
        .then(result => result.json())
        .then(json => resolve(json))
        .catch(err => {
          console.log(err);
          reject(err);
        });
    });
  }
  

Я также добавил "proxy": "http://localhost:3001/url" в packages.json .

Я все еще получаю ошибку:

 Access to fetch at 'http://localhost:3001/url' from origin 'chrome-extension://extension_id' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:3001/url' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
  

Есть ли какой-нибудь способ решить эту проблему?

Ответ №1:

Похоже, что вы добавляете путь /url к источнику, но источник является:

Источник веб-контента определяется схемой (протоколом), хостом (доменом) и портом URL, используемого для доступа к нему

Попробуйте использовать http://localhost:3001 в качестве исходного значения.

Комментарии:

1. ОК. Я только что попробовал это. Если я не добавлю cors-anywhere-heroku … Я получаю ту же ошибку, только за исключением /url . Если я добавлю cors-anywhere-heroku …. вместе с http://localhost:3001 , я получаю cors-anywhere.herokuapp.com/http://localhost:3001:1 Failed to load resource: the server responded