0
내 React-Redux 앱이 Axios를 통해 배포 된 Heroku API와 통신하려고합니다. 내가 Axios의를 통해 내 Heroku가 서버에 POST 요청을하려고하면내 React 앱에서 API 호출을 할 때 여전히 503 오류가 발생합니다.
나는 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();
});
그리고에서 서버에 API 호출을 만드는 Axios의 코드가 내 프런트 엔드 :
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 패키지를 사용해 보았지만 작동하지 않았습니다.