axios로 크롤링을 해보자.
예전에 ajax로 크롤링을 해봤는데, 현재는 ajax보다 axios를 더 많이 쓴다고 해서 axios로 해보려고 한다.
간단하지만 수 시간을 잡아먹은 놈이었다.
다 잘 했음에도 불구하고 404가 떴으니까...
해결은 마지막 줄에 있다.
누군가 이 글을 보고 axios 설정을 하고 CORS 에러를 해결하고자 한다면,
글을 읽고 모든 설정을 다 하고 맨 마지막 줄을 꼭!!!!!!!!!!!!!!! 읽기 바란다.
npm i axios
일단 폴더의 터미널을 열고 위 명령어를 입력해서 axios를 설치해준다.
아래는 기본적인 get 요청의 모습이다.
// App.js
import axios from "axios";
function App() {
const data = async () => {
await axios
.get(
"https://여긴주소.com/api/weather/asdasd")
.then((data) => {
console.log(data.request.response);
});
};
data();
return <div>크롤링 연습</div>;
}
export default App;
하지만 여기서 CORS에 막히는 콘솔창을 볼 수 있다.
pakage.json 파일 맨 아래에 "proxy":"https://여긴주소.com" 한 줄을 추가하고,
.get(
"/api/weather/asdasd")get 부분의 주소를 위 코드처럼 바꿔주는 걸로 해결할 수 있지만,
여러 곳에서 크롤링 해야하는 경우가 생길 수도 있기 때문에 아래 방법을 추천한다.
아래의 명령어로 http-proxy-middleware 설치해준다.
npm install http-proxy-middleware
그리고 js 파일을 하나 만들어야하는데, 무조건 src에 만들어야 한다.
src안의 다른 폴더에 만드는 것도 안되고, 아래 사진처럼 src 바로 안에 만들어야 한다.
파일 이름은 setupProxy.js 다. 파일 이름도 똑같이!
그리고 setupProxy.js 안에 다음 코드를 붙여넣어준다.
const {createProxyMiddleware} = require("http-proxy-middleware");
module.exports = function (app) {
app.use(
createProxyMiddleware("/api", {
target: "https://여긴주소.com",
changeOrigin: true,
ws: true,
})
);
// 아래 부분은 두 개 이상의 proxy를 사용할 경우.
// app.use(
// createProxyMiddleware('/다른context', {
// target: 'https://주소',
// changeOrigin: true
// })
// )
//};
이 아래 코드는 http-proxy-middleware
//App.js
// ...
await axios
.get(
"/api/weather/asdasd"
)
.then((data) => {
console.log(data);
});
// ..."/api"부분은 /api 경로로 시작하는 요청이 프록시 처리된다는 뜻이다.
https://여긴주소.com/api/weather/asdasd 주소를 보면, com다음에 /api가 시작된다.
그렇기 때문에 위 주소는 프록시 처리가 되는데, target에 /api 전의 주소인 https://여긴주소.com를 넣어줘야하고,
get요청에는 /api를 포함한 나머지 주소를 넣어줘야한다.
target은 프록시 처리를 할 주소를 말하고, 그 주소의 /api로 시작되는 주소를 get요청으로 받아오는 것이다.
이게 끝이다.
근데 분명 새로고침을 엄청 하는데 자꾸 404 에러가 뜨는 사람이 있을 것이다.
나도 그랬다.
그래서 구글링도 엄청하고 스택오버플로우도 겁나 찾아보고 '/'가 잘못된건지 하나하나 다 고쳐봤는데도 안됐다..
결론은 저 설정을 하면 서버 다시 켜줘야한다..... 으으...
