javascript - React JS 在使用 Axios 的 XMLHttpRequest 中出错

Question

我在前端使用 REACT-JS 框架:

这是我从REDUX-REACT

调用的 Action

export function UserLogin(values) {
    var headers = {
        'Access-Control-Allow-Origin': '*',        
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }

    const request = axios.post('http://localhost:8000/login', headers,  values).then(function(response){
        /*() => {callback();}*/
        console.log(response);
    })
    .catch((error) => {
        // Error
        if (error.response) {
            console.log(error.response.data);

        } 
        else if (error.request) {
            // The request was made but no response was received
            // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
            // http.ClientRequest in node.js
            console.log(error.request);
        } 
        else {
            // Something happened in setting up the request that triggered an Error
            console.log('Error', error.message);
        }
    });
    return {
        type: LOGIN_REQUEST_SUCCESS,
        payload: request
    };
}

出于测试目的，我从其他 localhost:8000 得到答案。

我收到以下错误:

Failed to load http://localhost:8000/login: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

控制台日志来自 error.request

Answer 1

您应该在服务器的响应 header 中设置 'Access-Control-Allow-Origin': '*',。

更多详情，查看this answer .