CORS 에러 해결하는 법 .

 

서버 설정을 한 후에 API 를 호출하려고 할 때 API 가 호출이 안 될 때가 있다. 

CORS 문제 때문에 API 가 호출이 안되는 경우가 있는데 그 부분을 해결하는 방법이다. 

 

 

일단 자신의 터미널이든 VSCode 이든 default.conf 를 열어준다.

- nano /etc/nginx/sites-available/default

 

우선 Https 적용을 했다면 아래와 같이 나올 것 이다. (.... 은 비공개 처리)

server { 

      server_name testHomepage.com ; // 내 홈페이지 도메인
      root /var/www/html; 
      index index.html;

      location / { 
			try_files $uri $uri/ /index.html; 

			add_header 'Access-Control-Allow-Origin' '*' always;
			add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
			add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always;

			if ($request_method = 'OPTIONS') {
				return 204;  # No Content
			}
      }


    listen 443 ssl; # managed by Certbot
    ssl_certificate ...........by Certbot
    ssl_certificate_..............; # managed by Certbot
    include.............. # managed by Certbot
    ssl_dhparam ............; # managed by Certbot

}


server {
    if (.............) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

 

      listen 80; 

      server_name ................. ;
    return 404; # managed by Certbot
}

 

 

https 적용을 안했다면 아래의 게시물을 보고 오세요.

https://jangstory.tistory.com/163

 

 

 

다시 이어서 하자면 자신이 연결할 API 주소와 Proxy 설정을 추가해 주는 방법이 있다. 

location /api/ {  // api 
    proxy_pass https://my_connect_page.or.kr/api/;   // 자신이 연결할 도메인 + (/api/)
    proxy_set_header Host my_connect_page.or.kr;  // 자신이 연결할 도메인
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;


    add_header 'Access-Control-Allow-Origin' '*' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always;

    if ($request_method = 'OPTIONS') {
        return 204;  # No Content
    }
}

 

 

이렇게 추가를 해줘야 한다. 전체코드로는 

 

server { 

      server_name testHomepage.com ; // 내 홈페이지 도메인
      root /var/www/html; 
      index index.html;

      location / { 
			try_files $uri $uri/ /index.html; 

			add_header 'Access-Control-Allow-Origin' '*' always;
			add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
			add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always;

			if ($request_method = 'OPTIONS') {
				return 204;  # No Content
			}
      }

      location /api/ {  // api 추가 
            proxy_pass https://my_connect_page.or.kr/api/;   // 자신이 연결할 도메인 주소 + (/api/)
            proxy_set_header Host my_connect_page.or.kr;  // 자신이 연결할 도메인 주소
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;


            add_header 'Access-Control-Allow-Origin' '*' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
            add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always;

            if ($request_method = 'OPTIONS') {
                return 204;  # No Content
            }
	   }

    listen 443 ssl; # managed by Certbot
    ssl_certificate ...........by Certbot
    ssl_certificate_..............; # managed by Certbot
    include.............. # managed by Certbot
    ssl_dhparam ............; # managed by Certbot

}


server {
    if (.............) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

 

      listen 80; 

      server_name ................. ;
    return 404; # managed by Certbot
}

 

 

 

마지막으로 제일 중요한 프론트 파트 (안드로이드 스튜디오 ) 에서 주소를 바꿔줘야한다.

 

class NetworkUrl {
  static const stationBaseUrl =
      
      //이전에 썼던 url
      // "https://my_connect_page.or.kr/api/chrstnList/operationInfo/";
      
      
      // my_connect_page.or.kr  -> testHomepage.com
      "https://testHomepage.com/api/chrstnList/operationInfo/";
}

 

 

 

이렇게 하면 CORS 문제를 해결하고 API 호출을 할 수 있게 됩니다.