react 클라이언트에서 open api접근시 cors에러 해결

- 만약 프록시 설정을 안하고 클라이언트에서 바로 open api에 값 요청시 cors 에러 발생 / 프록시 설정으로 해결

- 프록시 설정을 해야 한다.

1. pakage.json에서 "proxy"라는 키 추가

2. proxy키의 value값으로 open api의 주소 입력

3. axios를 이용하여 값을 가져올때 proxy에 입력한 주소를 제외한 나머지 값만 url에 넣어서 요청

4. 정상적으로 값을 가져온다.

예) http://kopis.or.kr/openApi/restful/pblprfr/{공연아이디} (요청할 open api주소) 

예) http://www.kopis.or.kr/openApi/restful/pblprfr/PF132236?service=ac1cdebda89d4c6983ea8219d9ca7e36

 

-> 요청할 open api주소 + 필요한 요청변수 추가(공연아이디, service 키값 추가)

 

 

--> pakage.json에 proxy키값을 추가해주고 사용할 open api의 주소를 value로 추가한다.

--> url부분에 proxy에서 설정한 open api주소를 제외한 나머지 부분만 추가해서 원하는 값을 얻어온다.

 

결론 : proxy에 지정된 부분에 open api 부분 주소를 설정하면 axios로 요청시 자동으로 프록시 부분이 추가되어서 요청이 되어 cors에러가 해결되고 정상작동한다.