Access to XMLHttpRequest at 'http://url/fileName' from origin 'http://url:port-number' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
xhr.js?b50d:210 POST http://url/fileName net::ERR_FAILED 200
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'data') at eval (fileName.vue?1c92:239)
■ 에러 발생
Vue.js 3 에서 Axios의 post 혹은 get을 사용해 php에 데이터를 요청해 결과 데이터를 불러오려는데 에러가 발생하였다.
이는 BackEnd (php) 에서 url요청 허용을 해놓지 않았기 때문에 발생한 에러이다.
그렇기 때문에 php파일에서 간단하게 추가해야한다.
<?php header('Access-Control-Allow-Origin:*');
이렇게 작성하면 되는데, 만약 다른 상세한 설정(PUT, DELETE 등) 도 추가하려면 아래의 내용까지 추가해주면 된다.
결과적으로 잘~ 작동합니다! 하지만, 만약 저 코드 양이 방대해진다면, 본인은 물론 다른 사람도 보다가 미쳐서 모니터를 주먹으로 칠 수도 있습니다.
그래서 나온것이 Promise() 입니다.
예시2) Promise() : 여러 개의 then() 사용하기
function delayP(sec) { // 인자를 시간초만 받음
return new Promise( ( resolve, reject ) => { // Promise (성공, 실패) 선언
setTimeout(() => {
resolve (new Date().toISOString()) // resolve(성공)에 해당하는 항목
}, sec * 1000)
})
}
then()
delayP(1)
.then((result)=> {
console.log(1, result)
return delayP(1) // delayP() 를 return 시켜 새로운 promise를 실행하는 것. then으로 이어 받을 수 있다.
})
.then((result) => { // 2번 째 then을 통해서 위의 첫번째 then이 실행된 이후에 실행. 즉, 1초 + 1초 에 실행된다.
console.log(2, result)
})
Promise() .then() 을 사용하는 것의 장점은 더 말할 필요가 없이 보기가 쉽습니다.
또한 구분지어서 코드를 작성하는데에도 문제가 없죠.
출력 결과
하지만 만약 반환값(return)을 작성해주지 않는다면,
delayP(1)
.then((result)=> {
console.log(1, result)
return delayP(1) // delayP() 를 return 시켜 새로운 promise를 실행하는 것. then으로 이어 받을 수 있다.
})
.then((result) => { // 2번 째 then을 통해서 위의 첫번째 then이 실행된 이후에 실행. 즉, 1초 + 1초 에 실행된다.
console.log(2, result)
// return이 없다. => 다음 result = undefined가 될 것이다.
// return 'string or something' 하면 해당하는 내용이 바로 출력된다.
// => delay를 통해 해당 내용을 지연시키지 않았기 때문에.
})
.then((result) => { // 받은 return 값이 null 이기 때문에 undefined를 출력한다.
console.log(3, result) // 출력 내용 ( 3, undefined )
})
2번째then에서 return이 없습니다!
=> 3번째delayP( null ) 이 들어갔다는 뜻입니다.
그렇기 때문에 출력되는 것은( 3, undefined ) 가 됩니다.
출력 결과
추가적으로 sec 라는 인자도 전달이 안되었기 때문에 바로 세번째 then() 이 실행되어 3, result 가 출력되었습니다.
