🖤 글이 도움이 되었다면 유튜브 클릭 해주세요 🖤
https://www.youtube.com/channel/UCgkxlLdjrlsFyp2GGxzY59A
axios 사용
axios 를 사용해서 컨트롤러와 통신을 하고자 한다.
나름대로 잘 사용했다고 생각하는데, 에러 발생
- npm 으로 설치하는 경우는 아래의 명령어를 Command창에 입력을 하면 됩니다.
- > npm install --save axios
- yarn 으로 설치하는 경우는 아래의 명령어를 입력을 하면 됩니다.
- > yarn add axios
- 직접 웹페이지의 <HEAD></HEAD> 영역 안에 입력을 해도 됩니다.
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
npm run build 한 후에 시도 ERROR
Uncaught (in promise) Error: Request failed with status code 404
at createError (createError.js?2d83:16)
at settle (settle.js?467f:17)
at XMLHttpRequest.handleLoad (xhr.js?b50d:62)서버를 켜주지 않아서 발생한 오류
이 코드를 실행 시켜야 한다.
실패
axios.get('/dataSelect')
성공
axios.get('//localhost/dataSelect')
성공
axios.get('http://localhost/dataSelect')
실행은 되나 반환이 안되는 건가 ERROR
Access-Control-Allow-Origin
아래 방법을 따라해 봐야겠다.
첫번째 방법
구글링 하다보니까 구글의 보안 문제 인 것이 확실해졌다.
Access to XMLHttpRequest at '주소A' from origin '주소B'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
먼저 Origin이라는 용어를 이해하자.
Origin은 간단하게 프로토콜, 주소, 포트번호의 쌍을 말한다.
Origin = [프로토콜]://[Host의 IP 주소 또는 URL]:[포트번호]
여기서 포트 번호는 생략 가능하다.
생략하면 HTTP 방식으로 오면 80, HTTPS 방식으로 오면 443을 이용하게 된다.
다른 Origin이라고 하면 프로토콜(HTTP, HTTPS)이 다르거나
주소(a.com, b, com,...)가 다르거나 포트번호(80, 433,...)가 다르다는 말이다.
Same Origin / Cross Origin Policy 때문에 내가 접속한 사이트에서 다른 Origin에 요청한 것들을 기본적으로 차단된다.
embed나 사전요청은 되지만 그 데이터를 읽는 건 보안상의 이유로 차단한다.
하지만 우리는 다른 Origin으로부터의 자원 공유가 필요한 경우가 많다.
그렇기 때문에 CORS(Cross Origin Resource Sharing)이라는 것이 존재한다.
다른 Origin의 데이터를 읽고 싶으면 CORS 표준을 지켜서
내 사이트로부터의 응답에 "다른 Origin이더라도 허용해줘!" 라고 말해주면 된다.
이 방법도 실패
이것도 그럴 듯 해봐서 해봤으나 실패
this.axios.post('http://localhost:8888/project/login', this.data, {
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PATCH, PUT, DELETE, OPTIONS",
"Access-Control-Allow-Headers": "Origin, Content-Type, X-Auth-Token"
}
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err.response);
});'개발중 > Vue.js' 카테고리의 다른 글
| vue @change (0) | 2021.04.01 |
|---|---|
| vue 를 동작 시키는 다른 방법 (0) | 2021.03.04 |
| CODEMIX 로 인한 파일 로딩 오류 (2) | 2021.03.02 |
| 이클립스에서 vue 파일 생성하는 방법 (0) | 2021.03.02 |
| 이클립스에서 vue import (0) | 2021.03.02 |
