时间戳

首页 > 解决方案 > React-Redux：使用 Redux 操作时的环回跨域错误

reactjs - React-Redux：使用 Redux 操作时的环回跨域错误

问题描述

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

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

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

标签： reactjsreduxcorsaxiosloopbackjs

解决方案

好的，在研究、上网和大量代码更改之后，
我发现在这种情况下需要它来防止 onSubmit() 的默认操作。

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

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

推荐阅读