React-Redux：使用 Redux Action 时出现 Loopback Cross-Origin 错误

Question

我正在关注 Rem Zolotykh 的 this 视频教程。我遇到的问题是，在 Form 的 onSubmit() 中查询 LoopBack 服务器是有效的，并且使用具有相同查询的 Redux Action 会给我一个跨源错误。

环回服务器运行位于 localhost:3000
React 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 时出现 Loopback Cross-Origin 错误

React-Redux: Loopback Cross-Origin Error when using Redux Action

cors

reactjs

loopbackjs

redux

axios