Reactjs Ошибка предпечатной проверки

Question

Я пытаюсь fetch API на ReactJS с basi c аутентификацией (это сложный запрос).

Я наткнулся на многие статьи, большинство предлагаем изменить что-то на node, но здесь, в этом случае, я не использую какой-либо сервер узла. Я закомментировал весь код NodeJS и извлекаю этот API напрямую из componentDidMount(), очевидно, у ReactJS есть собственный сервер. В настоящее время я использую сторонний плагин cors chrome, но я не склонен использовать сторонние прокси-серверы, такие как Heroku или NGINX, или сторонние библиотеки, такие как axios. Плагин Cors chrome помог мне решить проблему access-control-allow-origin, но затем поднял эту новую проблему.

Access to fetch at 'https://server-iam-fetching/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Я пробовал несколько вещей, таких как добавление проверок контроля доступа к заголовку, но ни одна из них не работает. Вот мой пример кода:

let headers = new Headers();
headers.append("Access-Control-Request-Headers", "*")

headers.append('Authorization','Basic ' + btoa(username + ":" + password));
    credentials
    allow requests
    allow origins
    ..
    ..
    etc
const someRequest = new Request(url, {
  method: 'GET',
  headers:headers,
  mode:'cors',
  cache: 'default'
});

componentDidMount(){
  fetch(someRequest)
    .then(response => response.json())
    .then(json => console.log(json))
}

Не стесняйтесь комментировать любые вопросы. Я на MacOS. Кроме того, я не хочу отключать мою chrome веб-безопасность.

Answer 1

На самом деле, если у вас есть доступ к API, вы должны исправить это в вашей конфигурации NGINX или в кодах бэкэнда. но если у вас нет доступа, есть два рекомендуемых способа:

1. Напишите API прокси-сервера mapper по узлу / express и отправьте на него все ваши вызовы, а API-интерфейс mapper отправит его на основной API. в маппере у вас есть доступ, разрешающий все источники:

   const express = require('express');
   const request = require('request');
   
   const app = express();
   
   app.use((req, res, next) => {
       res.header('Access-Control-Allow-Origin', '*');
       next();
   });
   
   app.get('/jokes/random', (req, res) => {
       request(
           { url: 'https://the-main-api-address' },
           (error, response, body) => {
               if (error || response.statusCode !== 200) {
                   return res.status(500).json({ type: 'error', message: err.message });
               }
   
               res.json(JSON.parse(body));
           }
       )
   });
   
   const PORT = process.env.PORT || 3000;
   app.listen(PORT, () => console.log(`listening on ${PORT}`));
   

2. Если вы используете webpack-dev-server, вы можете использовать приведенную ниже конфигурацию, чтобы разрешить все источники в вашем веб-пакете devServer:

   devServer: {
     ...
     headers: {
       "Access-Control-Allow-Origin": "*",
       "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
       "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
     }
   }
   

   Или передать proxy:

       devServer: {
      contentBase: DIST_FOLDER,
      port: 8888,
      // Send API requests on localhost to API server get around CORS.
      proxy: {
         '/api': {
            target: {
               host: "0.0.0.0",
               protocol: 'http:',
               port: 8080
            },
            pathRewrite: {
               '^/api': ''
            }
         }
      }
   },
   

Подсказка: Я предпочитаю использовать первый.

Answer 2

Это сообщение только для вашего режима разработки , вы можете запустить экземпляр Google Chrome, который не имеет модулей безопасности, и он не будет отправлять OPTION звонки, и определенно вы не увидите Ошибка CORS, поэтому откройте свой терминал и напишите в нем следующие команды:

open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security