Question

我正在观看Rem Zolotykh的this视频教程。我遇到的问题是，可以从Form的onSubmit（）中查询LoopBack服务器，并且对同一查询使用Redux Action会产生跨域错误。

运行在localhost：3000上的LoopBack服务器
反应Webpack服务器运行在localhost：3001（我使用过create-react-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操作：

--------------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
        });   
    }
}

浏览器控制台给我一个跨域错误，我明白。但是，为什么在没有redux的情况下它可以工作呢？

Answer 1

好吧，在研究，浏览互联网和大量代码更改之后，
我发现在这种情况下需要来防止onSubmit（）的默认操作。

我认为它不喜欢页面重新加载。
现在工作。

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

React-Redux：使用Redux Action时环回跨域错误

1 个答案: