выборка экспресс-бэк-энда с ошибкой реагирования возврата 405 (из источника 'null' был заблокирован политикой CORS: ответ на предпечатную проверку и т. д ...) - PullRequest
Новая
       16

выборка экспресс-бэк-энда с ошибкой реагирования возврата 405 (из источника 'null' был заблокирован политикой CORS: ответ на предпечатную проверку и т. д ...)

0 голосов
/ 05 октября 2019

У меня есть небольшое приложение экспресс / реагирование. Я работаю на стороне сервера на порту 5000 и на стороне клиента на порту 3000. У меня есть следующий компонент на внешнем интерфейсе: 

componentDidMount() {
    fetch('http://localhost:5000/auth/google',
    {
          method: 'GET',
          headers: {'Content-Type': 'application/json'},
          credentials: 'same-origin',
          'Access-Control-Allow-Origin': '*'
      })
      .then(res => { 
        if (!res.ok) {
          throw res;
        }
        return res.json()
      }).then(data => {
        this.setState({loading: false, data});
      }).catch(err => {
        console.error(err);
        this.setState({loading: false, error: true});
      });
  }

на сервере У меня есть это: 

router.get(
    "/auth/google",
    passport.authenticate("google", { scope: ['Profile','https://www.googleapis.com/auth/analytics.readonly'] })
);

router.get(
    "/auth/google/callback",
    passport.authenticate("google", { failureRedirect: "/error", session: false }),
    function(req, res) {
        var token = req.user.token;
    request('https://www.googleapis.com/analytics/v3/management/accounts?access_token=' + token,  
function (error, response, body) {
  console.log(JSON.parse(body).items);
res.send(JSON.parse(body).items)
});
    }
);

и вот ошибка у меня: 

Failed to load resource: the server responded with a status of 405 ()

и 

Access to fetch at 'https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A5000%2Fauth%2Fgoogle%2Fcallback&scope=Profile%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fanalytics.readonly&client_id=blablabla.apps.googleusercontent.com' (redirected from 'http://localhost:5000/auth/google') from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

1 Ответ

0 голосов
/ 05 октября 2019

Нарушение безопасности CORS вызвано вашим браузером, который:

  • получил код React (предположительно, комплекты скриптов) с одного сервера,
  • видит попытки этого кода извлечь издругой сервер, который не говорит браузеру успокоиться и допустить это нарушение безопасности.

Не удалось загрузить ресурс: сервер ответил со статусом 405

Это означает, что браузер пытался связаться с «другим сервером» до получения и спросить, должен ли он терпеть нарушение безопасности, но «другой сервер» отказался говорить. Технически говоря, браузер отправил HTTP-запрос, используя HTTP-глагол OPTIONS, и сервер ответил, указав, что он не поддерживает этот глагол.

Доступ к выборке в 'https://accounts.google.com/o/oauth2/

Это фактическое нарушение CORS, обнаруженное браузером, который фактически отказался выполнять выборку.

Существует множество рецептов, как успокоить браузер, чтобы он допустил нарушения CORS. Но лучший подход состоит в том, чтобы гарантировать, что нарушения не произойдут, чтобы не было необходимости ослаблять безопасность.

Результатом сборки приложения React являются файлы .html и пакеты сценариев, возможно, исходные карты. Называется сборка артефактов. Если вы структурируете свой проект таким образом, чтобы как в процессе разработки, так и в процессе производства браузер получал все (артефакты сборки, ответы API) из одного источника, например Express, тогда не будет места для проблем с CORS.

...