Question

我在使用某些React-Redux登录/注册系统时遇到问题。我购买了Wiedly react模板，安装了jwt模板，因此我只需要更改为localhost：8000即可。总是出现类似的问题

Access to XMLHttpRequest at 'http://localhost:8000/api/login' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

但是奇怪的是，当我注册一个新客户端时，它总是发送该信息并添加到数据库中。顺便说一句，我正在使用Laravel作为后端。我尝试过类似的方法，但没有成功

export default axios.create({
  baseURL: `http://localhost:8000`,
  headers: {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin' : '*',
    'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE',
  }
});

它没有Access Controll，所以我添加了它，但没有任何更改。

这是React函数

export const userSignIn = ({email, password}) => {
  return (dispatch) => {
    dispatch({type: FETCH_START});
    axios.post('api/login', {
        email: email,
        password: password,
      }
    ).then(({data}) => {
      console.log("userSignIn: ", data);
      if (data.result) {
        localStorage.setItem("token", JSON.stringify(data.token.access_token));
        axios.defaults.headers.common['access-token'] = "Bearer " + data.token.access_token;
        dispatch({type: FETCH_SUCCESS});
        dispatch({type: USER_TOKEN_SET, payload: data.token.access_token});
      } else {
        dispatch({type: FETCH_ERROR, payload: data.error});
      }
    }).catch(function (error) {
      dispatch({type: FETCH_ERROR, payload: error.message});
      console.log("Error****:", error.message);
    });
  }
};

尝试在axios发布后添加

headers: { 'Content-Type': 'application/json' }

和

headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin' : '*',
    'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE' }

但没有成功

React-Redux XMLHttpRequest被阻止

0 个答案: