사진과코딩

[Vue.js] CORS 정책 본문

KB IT's Your Life

[Vue.js] CORS 정책

Dev_Fuji 2024. 5. 22. 18:12

CORS - (Cross-Origin Resource Sharing)

  • 도메인이 다른 서버끼리 리소를 주고 받을 때 보안을 위해 설정된 정책,  웹 브라우저에서 다른 도메인의 API를 사용할 때, 보안을 위해 설정된 보안 정책
    ex) A.html -> B Server 호출 할 떄, B Server에  A.html에 대한 CORS 정책이 허용으로 설정 되어야 접근이 가능하고 
    허용이 아니면 접근이 거부된다.

 

CORS 필요성 

  • CORS가 없이 모든 곳에서 데이터를 요청할 수 있게 된다면 악의적으로 서버의 정보를 꺼내오거나 다른 사용자의 정보를 가져오는 등 공격을 당할 수 있다. 하지만 이런 공격을 할 수 없도록 브라우저에서 보호하고, 필요한 경우에만 서버와 협의하여 요청할 수 있도록 하기 위해서 필요하다

 

CORS 발생 원인

  • URL의 Protocol, Host, Port를 통해 같은 출처 또는 다른 출처인지 확인이 가능하다. 세가지가 다 같아야지만 같은 출처라고 보고, 그중 하나라도 다르면 다른 출처. 3가지중 1가지라도 다르면 서로 다른 출처로 판단되어 CORS 위반 에러가 발생한다.(Access to XMLHttpRequest at 'http://localhost:3000/' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.)
  1. 프로토콜: http와 https는 프로토콜이 다르다.
  2. 도메인: localhost과 naver.com은 도메인 다르다.
  3. 포트번호: 80 port와 3000 port는 port가 다르다.

URL 구조
CORS 오류

 

CORS 설정법 - API 서버

  • CORS 설정은 API 서버에서 HTTP 응답 헤더에 "Access-Control-Allow-Origin" 항목을 추가하여 허용할 도메인을 지정하는 것으로 가능.
  • $ Access-Control-Allow-Origin: https://localhost:5500
  • 이렇게 설정된 서버는 localhost의 5500번 포트만 접근이 가능하게 됩니다.

 

CORS 설정법 - Node.js

// express 추가 npm i express
const express = require('express');
const app = express();

// cors 추가 npm i cors
const cors= require('cors');
app.use(cors({
     origin: 'http://127.0.0.1:5500' //접속이 허용된 origin, 'http://127.0.0.1:5500'이 주소만 접속을 할 수 있다.
    // origin: '*' //모든 접속 허용
}));

 

CORS 설정법 - Nginx

  • nginx.conf
$ add_header 'Access-Control-Allow-Origin' '*';

 

CORS 설정법 - Tomcat 

  • web.xml 
<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

 

CORS 예제

  • Client
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <!--JQUERY 사용하기 위한 구문-->
</head>
<body>
    
    <button type="button" id="demo" onclick="btnclick()">확인</button>
    <script>
        const btnclick=()=>{
            $.ajax({
                url:"http://localhost:3000",
                type:"GET",
                success:function(data){
                    alert('success');
                    
                },
                error:function(){
                    alert('error');
                    //cors 오류 발생 => 허가는 Server에서 해주는 것
                }
            });
        }
    </script>
</body>
</html>
  • Server
const express = require('express');
const app = express();

const cors= require('cors');
app.use(cors({
    origin: 'http://127.0.0.1:5500' //접속이 허용된 origin(출처)
}));

app.get('/',(req,res)=>{
    console.log("접속 성공");
    res.send("hello express");
})

const port=3000;
const listener = app.listen(port,()=>{
    console.log(`express server start port : ${port}` ); // 
});
  • CORS 거부

 

  • CORS 허용

'KB IT's Your Life' 카테고리의 다른 글

[Vue.js] Vue.js 구조 및 디렉티브  (0) 2024.05.23
[JavaScript] Json Filter / Json 특정 값 추출  (0) 2024.05.23
[Git] 이론 및 명령어 정리  (0) 2024.05.20
[JavaScript] Promise 비동기 처리  (0) 2024.05.20
[JavaScript] JavaScript Engine V8  (0) 2024.05.20
'KB IT's Your Life' Related Articles more