[ PHP, Vue.js ] 에러 해결 Access to XMLHttpRequest at blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. net::ERR_FAILED 200

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 등) 도 추가하려면 아래의 내용까지 추가해주면 된다.

header('Access-Control-Max-Age: 86400');

header('Access-Control-Allow-Headers:x-requested-with');

header('Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS');

 

이상입니다.

 

결과 console window

출력 내용

console.log('axios')
console.log(response)