在我的React应用程序中进行API调用时仍然出现503错误

Question

我试图让我的React-Redux应用程序通过Axios与我部署的Heroku API进行通信。

当我尝试通过Axios向我的Heroku服务器发出POST请求时，我在Chrome开发人员工具的控制台中收到此错误消息：

正如您在screencap中看到的那样，我在请求的资源上出现“No'Access-Control-Allow-Origin'标头。”以及503的错误状态代码。

而我觉得奇怪的是我的/register请求被解雇了两次。这是正常的吗？

以下是我的后端代码中app.js文件中的配置，用于启用跨域请求：

app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", '*');
    res.header("Access-Control-Allow-Credentials", true);
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS');
    res.header("Access-Control-Allow-Headers", "Access-Control-Allow-Headers,Access-Control-Allow-Methods,Access-Control-Allow-Origin,Origin,X-Auth,X-Requested-With,Content-Type,Accept,content-type,application/json,x-auth,Access-Control-Request-Method,Access-Control-Request-Headers");
    next();
});

这里是Axios代码，它在我的前端对服务器进行API调用：

import axios from 'axios'

export function register(fields) {

    console.log('below are the fields');

    console.log(fields);


    return function action(dispatch) {

        let objArrSkills = Object.keys(fields.form_skills);

        let skillsArr = objArrSkills.map(function (value) {

            if (fields.form_skills[value] === true && fields.form_skills[value] !== undefined) {

                return value;

            }

        });

        let objArrArts = Object.keys(fields.form_arts);

        let artsArr = objArrArts.map(function (value) {

            if (fields.form_arts[value] === true && fields.form_arts[value] !== undefined) {

                return value;

            }


        });

        console.log('artsArr is...' + artsArr);

        console.log('skillsArs is...' + skillsArr);


        const request = axios({

            method: 'post',

            url: "https://jammr-backend.herokuapp.com/register",

            data: {

                firstName: fields.form_first_name,

                lastName: fields.form_last_name,

                email: fields.form_email,

                password: fields.form_password,

                skills: skillsArr,

                iWantToMake: artsArr,

                street: fields.form_address,

                city: fields.form_city,

                provinceState: fields.form_province,

                gender: fields.form_gender,

                imLookingFor: ['Acting', 'Drawing', 'Music', 'Writing', 'Programming', 'Videography']


            },

            headers: {

                'Content-Type': 'application/x-www-form-urlencoded',

                'Access-Control-Allow-Origin': '*',

                'Access-Control-Allow-Headers':   "Access-Control-Allow-Headers,Access-Control-Allow-Methods,Access-Control-Allow-Origin,Origin,X-Auth,X-Requested-With,Content-Type,Accept,content-type,application/json,x-auth,Access-Control-Request-Method,Access-Control-Request-Headers",

                'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS'

            }


        });


        return request.then(response => {

                console.log('axios call ran! Below is response....');

                console.log(response);

                dispatch({

                    type: 'REGISTER',

                    payload: {

                        myId: response.data,

                        fields: fields,

                        skills: skillsArr,

                        iWantToMake: artsArr

                    }

                })


            },
            err => {

                if (err) throw err;

            })


    }
};

我的代码有什么问题吗？这是我在Github上的front-end和back-end代码。

如果它是相关的，我的后端部署在Heroku上。此外，我确实尝试使用cors npm包，但它没有用。

Answer 1

我愿意打赌你从heroku堆栈中得到了503，因为你的后端存在一些问题。 （也许超时？）显然，Heroku堆栈不会添加交叉原点标头，这就是为什么你在JS控制台中看到交叉原点错误的原因。你可以发布你的服务器日志吗？