Question

我的React应用遇到一些与Access-Control-Allow-Origin有关的异常问题。我在登录/注册系统中遇到了这样的问题，并且我进行了修复（显然没有）。现在，我在获取用户信息方面遇到问题。在我登录的文件中，注册时我有一个获取用户信息的功能，当我console.log登录时，它没有请求，方法：OPTIONS，状态码：403禁止给我'Access-Control-Allow-Origin' ，我的代码如下所示。

export const getProfile = () => {
    return axios
        .get('api/user', {
            headers: { Authorization: `Bearer ${localStorage.token}` }
        })
        .then(response => {
            console.log(response)
            return response.data
        })
        .catch(err => {
            console.log(err)
        })
}

我正在使用Laravel API，我具有处理CORS的功能，在登录/注册时遇到困难，并且是同一问题，我已将其修复，而CORS显然处理不佳或出了点问题？当我尝试邮递员时，一切正常。

这是登录表单的外观。

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

Answer 1

即使我安装了chrome扩展程序来阻止CORS，仍然出现相同的错误，只是没有消息由于标题而被cors阻止。

Answer 2

您是否在Postman（示例）上测试端点，是否工作正常？

您可以发布CORS吗？

可能是CORS配置上的错误

Answer 3

首先，您正在尝试从本地存储中获取令牌，应该这样写：

localStorage.getItem('token')//make sure 'token' is the name you saved in local storage

尝试在标头中添加以下代码以及“授权”，并检查其是否有效：

"Access-Control-Allow-Origin": "*"

如果不起作用，请在标题中添加更多内容

 headers: { "X-Custom-Header": "foobar", "Access-Control-Allow-Origin": "*",Authorization: `Bearer ${localStorage.getItem(token)}` },

JS不返回“ Access-Control-Allow-Origin”

3 个答案: