React-Redux: Loopback Cross-Origin Ошибка при использовании Redux Action - PullRequest
Новая
       29

React-Redux: Loopback Cross-Origin Ошибка при использовании Redux Action

0 голосов
/ 03 сентября 2018

Я слежу за этим видеоуроком от Рема Золотых. У меня проблема с тем, что запрос к серверу LoopBack в onSubmit () из формы работает, а использование Redux Action с тем же запросом выдает ошибку Cross-Origin.

  • Сервер LoopBack, работающий на локальном хосте: 3000

  • React Webpack Server работает на локальном хосте: 3001 (я использовал create-Reaction-app)

Эта следующая функция onSubmit работает. Пожалуйста, не обращайте внимания на то, что это просто для тестирования. 

--------------SignupForm.js-----------------
...
onSubmit(e) {
    const user_data = { "email": "foo@bar.com",
                        "password": "xxx" };

    axios.post('http://localhost:3000/api/Users/login', user_data)
    .then((response) => {
        auth_token = { headers: { 'Authorization': response.data.id } };
        return axios.get('http://localhost:3000/api/empsecure', auth_token)
    })
    .then((response) => {
        console.log('Queried Data:', response);
        return axios.post('http://localhost:3000/api/Users/logout',{},auth_token)
    })
    .then((response) => {
        console.log("logged out", response);
    });
}
...

Вот измененные onSubmit () и Redux Action: 

--------------SignupForm.js-----------------
...
onSubmit(e) {
    this.props.userSignupRequest(this.state);
} 
...
-------------signupActions.js---------------

import axios from 'axios';

export function userSignupRequest(userData) {
    return dispatch => {
        const auth_token = {
            headers: {'Authorization': 'BgKeyYGVWxx5ybl649jhiPiHpZAyACmV6d9hfJ5UAJxs1McR4RaqANBgwP8vEqiH'}
        }; 

        axios.get('http://localhost:3000/api/empsecure', auth_token)
        .then((response) => {
            console.log('Queried Data:', response);
            return response
        });   
    }
}

Консоль браузера выдает ошибку Cross-Origin, я так понимаю. Но почему тогда он работает без избыточности?

1 Ответ

0 голосов
/ 04 сентября 2018

Хорошо, после исследования, серфинга в Интернете и большого количества изменений кода,
Я обнаружил, что в этом случае требуется , чтобы предотвратить действие по умолчанию для onSubmit () .

Я думаю, что не понравилась перезагрузка страницы.
Работает сейчас. 

onSubmit(e) {
    e.preventDefault();
    this.props.userSignupRequest(this.state);
}
...