Reactjs Preflight Request Err

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

Я наткнулся на многие статьи, большинство из них предлагают что-то изменить на node но здесь, в этом случае, я не использую какой-либо сервер узла. Я закомментировал весь код NodeJS и 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.

Всего 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

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

  1. Напишите API прокси-сервера mapper по узлу / экспрессу и отправьте на него все ваши вызовы, а 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': ''
             }
          }
       }
    },
    

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


Есть идеи?

10000