Written by php-style
on 2021-11-11

[ PHP, Vue.js ] 에러 해결 Access to XMLHttpRequest at blocked by...

728x90

반응형

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파일에서 간단하게 추가해야한다.

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)

728x90

반응형

from http://code-hoon.tistory.com/122 by ccl(A) rewrite - 2021-11-11 15:01:06

Top