Реакция JS: ошибка CORS, вызывающая ошибку NetworkError при попытке извлечь ресурс - PullRequest
Новая
       24

Реакция JS: ошибка CORS, вызывающая ошибку NetworkError при попытке извлечь ресурс

0 голосов
/ 05 февраля 2020

Я уже нашел этот , который уже помог мне, но после добавления заголовка, как это в моем прокси. js: 

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(function(req, res, next) {
//adding headers to allow CORS
        res.header("Access-Control-Allow-Origin", "*");
        res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        next();

    });
    app.use(proxy('/api', { target: 'http://localhost:8080' }));
}

В fetch () я также добавил заголовок, чтобы убедиться, что он работает: 

fetch('http://localhost:8080/api',{
            headers:{
                'Access-Control-Allow-Origin':'*'
            },

        })
            .then(res => res.json())
            .then((data) => {
                this.setState({ contacts: data })
            })
            .catch(console.log)
    }

Я все еще получаю ошибку: TypeError: "NetworkError при попытке извлечь ресурс."

this.setState({ contacts: data }) должен хранить JSON Объекты который поставляется моей программой Backend Java. JSON Объекты находятся на локальном хосте: 8080 / api и являются просто строками

Мой интерфейс React работает на локальном хосте: 3000

Заголовок ответа выглядит следующим образом

Где мне нужен этот заголовок, чтобы не получить ошибку CORS, желательно, чтобы я работал без библиотеки "1047" * cors или какого-либо дополнения браузера. Я также должен заменить '*' на localhost: 8080 Если я не ошибаюсь, верно? Моей конечной целью было бы поместить эти строки в компонент PrimeReact (A Table) динамически.

Редактировать: полное сообщение об ошибке, запрошенное sideshowbarker:

Предупреждение:

Cross- запрос источника заблокирован: то же правило источника запрещает чтение внешнего ресурса по адресу http://localhost: 8080 / api . (причина: предварительный канал CORS не был успешным).

Предупреждение:

Запрос перекрестного источника заблокирован: одно и то же правило источника запрещает чтение внешнего ресурса в http://localhost: 8080 / апи . (Причина: сбой предварительного канала CORS).

ОШИБКА:

TypeError: "NetworkError при попытке извлечь ресурс.

// Это на немецком языке, поэтому я не смог загрузить скриншот, перевел его, я забыл упомянуть, что я тоже поместил @CrossOrigin на свой Restcontroller

Ответы [ 2 ]

0 голосов
/ 10 февраля 2020

После бесчисленных часов отладки выясняется, что я не вставил http.cors(); в свой WebSecurityConfig. java Я обнаружил это после того, как прочитал этот урок: https://www.baeldung.com/spring-security-cors-preflight

0 голосов
/ 05 февраля 2020

Невозможно комментировать из-за низкой репутации, но вы установили app.listen (8080); ?

Кроме того, я не думаю, что вам нужно что-то менять в CORS, если вы работаете на localhost.

Не могли бы вы изменить что-то в своем браузере, что могло бы вызвать это? Попробуйте другой браузер?

Также я бы порекомендовал использовать топор ios, определив его как GET спереди и сзади, убедившись, что при go до http://localhost: 8080 / api в браузере вы получаете JSON на вашем экране.

...