All Articles

CORS issues & RESTful API

RESTful API 사용시 CORS 문제 해결하기 Resolving CORS issues when using RESTful API

CORS (Cross-Origin Resource Sharing, CORS)

교차 출처 리소스 공유 (CORS) 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.

웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행한다.

교차 출처 요청의 예시

https://domain-a.com의 프론트 엔드 JavaScript 코드가 XMLHttpRequest를 사용하여 https://domain-b.com/data.json을 요청하는 경우

1. CORS issues when using one APIs

한개의 API 사용시

package.json

"proxy": "http://apiurl",

code

import React, { useEffect } from 'react';
import axios from 'axios'

//...

const URL = '/api/somecode'

useEffect(() => {
  const fetchData = async () => {

    try {
      const res = await axios.get(URL, )
      console.log(res)
    }
    catch (e) {
      console.log(e)
    }
  }

  fetchData()
}, [])

//...

https://create-react-app.dev/docs/proxying-api-requests-in-development

2. CORS issues when using multiple API

여러 API 사용시

setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(
    createProxyMiddleware('/api', {
      target: 'https://github.com',
      changeOrigin: true,
    })
  );
};

code

import React, { useEffect } from 'react';
import axios from 'axios'

//...

const URL_ONE = '/openapione'
const URL_TWO = '/openapitwo'

useEffect(() => {
  const fetchDataOne = async () => {

    try {
      const res = await axios.get(URL, )
      console.log(res)
    }
    catch (e) {
      console.log(e)
    }
  }
  
   const fetchDataTwo = async () => {

    try {
      const res = await axios.get(URL, )
      console.log(res)
    }
    catch (e) {
      console.log(e)
    }
  }


  fetchDataOne();
  fetchDataTwo();
}, [])

//...

💡JSON pasing error when deploying Netlify

public/_redirects

/openapione/*  http://openapi.data.go.kr/openapi/:splat  200
/openapitwo/*  http://other-openapi.data.go.kr/openapi/:splat  200
/*    /index.html   200

Reference



Published 2 Aug 2020

ui code labUI-Dev on github