CORS

Posted on

CORS는 Cross Origin Resource Sharing의 약자로 도메인 및 포트가 다른 서버로 클라이언트가 요청했을 때 브라우저가 보안상의 이유로 대상의 아이피를 차단하는 문제이다

이번에 문제가 된 뉴욕타임즈 api 사용을 한 경우에 발생하여 이번에는 get 방식으로 api 검색사이트를 만들었지만 보안상의 이유와 관리측면에서 post 가 확실히 좋은 방식인 것은 분명하다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
fetch(URL,
    {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      "fq": "romney",
      "facet": true,
      "begin_date": 20220101,
      "end_date": 20220725
    }),
    // URL(api)에 전달가능한 쿼리를 안보이게 전달
   }).then((response) => response.json())
   .then((json)=>{
     const Array= json.response 
     const len=docsArray.length
     for(let i=0;i<Array;i++){
       const myP=document.createElement('p')
       myP.innerText=docsArray[i]
       document.body.append(Array[i].data)     
   }})
   .catch((error)=>console.log(error))

위와 같은 fetch 방식으로 보내서 해결해보려고 했지만 서버자체의 접근문제라 문제 해결 방식을
찾는데 시간이 조금 필요할것 같다.

1
2
3
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');

서버별로 해결방식은 여러방식이 있었는데 그 전 직장에서 해결했던 방식은 PHP 서버에서의 해결 방식이었다.Access-Control-Allow-Origin: *을 입력해서 모든 도메인을 허용하는 방법이고
* 대신에 특정 url만 허용할 수도 있다.
밑의 내용은 GET, POST, PUT, DELETE, OPTIONS을 허용한다는 의미이다.

노드 방식의 해결 방식도 있었다.

1
2
3
4
5
6
7
8
9
10
11
12
13
const cors = require('cors');
const domains = ['http://localhost:3000'];
//현재 도메인 지정가능

const corsOptions = {
  origin: function(origin, callback){
  	const isTrue = domains.indexOf(origin) !== -1;
    callback(null, isTrue);
  },
  credentials: true
}
app.use(cors(corsOptions));
//앱에서 사용하여 해결

해결방식을 한번 실행한뒤에 다시한번 내용을 추가 수정할 예정이다