cors 에러 해결 기록

 

1. 나의 상황

http로 된 프로젝트에서 https로 만들어진 POST 형식으로 웹서비스를 호출해서 데이터를 리턴 받아와야했다.

 

			//운영
			var webServiceRootURL = "https://웹서비스링크";
			
			
			var jsonData = {
					"Param1":"데이터들"
			}


		    $.ajax({
		          url : webServiceRootURL,
		          dataType : "text",
		          type : "POST",
		          contentType : "application/x-www-form-urlencoded; charset=UTF-8",
		          dataType: 'json',
		          cache : false,
		   		 data : JSON.stringify(jsonData),
		          success:function(html){
		        	 alert('부르기 완료');
		          },
		          error:function(xhr, status, error){
		        	  console.error(xhr.status, xhr.responseText, error);
		              return;
		          }
		      });

 

이렇게 날리면 아래와 같은 에러가 발생한다.

XHR failed loading: POST

 

 

2. 오류 원인

 

내가 만드는 주소는 

http:// 0.0.0.0 / test.do

내가 호출하려는 웹 서비스는

https://webService/web.svc/T1

 

주소의 형식이 다르다.

http / https 를 비롯해서 주소 전체가.. 그러면 크로스 도메인 정책에 위반이 된다고한다.

자세한 내용은 아래 링크에서 확인하면 된다.

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS) - HTTP | MDN

 

 

 

3. 해결방법

 

1) dataType : 'jsonp' - 실패

이건 POST는 안되고 GET만 가능하다고 한다. 장렬히 실패 

		    $.ajax({
		          url : webServiceRootURL,
		          dataType : "text",
		          type : "POST",
		          contentType : "application/x-www-form-urlencoded; charset=UTF-8",
		          dataType: 'jsonp',
		          cache : false,
		   		 data : JSON.stringify(jsonData),
		          success:function(html){
		        	 alert('부르기 완료');
		          },
		          error:function(xhr, status, error){
		        	  console.error(xhr.status, xhr.responseText, error);
		              return;
		          }
		      });

 

2) 컨트롤러로 우회하여 접속 (내가 선택한 방법)

	@RequestMapping(value = "/test.do")
	public @ResponseBody List<Map<String, Object>> test(HttpServletRequest request, @RequestBody String param)throws Exception {
		System.out.println("=========test============");
		
		String parameters = param.replace("}", ","+paramData+"}");
		
		System.out.println(parameters);
		
		String urlString1 = "서비스 경로 " ;
		
	    List<Map<String, Object>> resultList = new ArrayList<>();
		
        Object responseObj = null;

        JSONParser p = new JSONParser();
        String jsonStr =parameters.toString();  
		

		try {
			
			URL url = new URL(urlString1);
			
			HttpURLConnection conn = (HttpURLConnection) url.openConnection();
			conn.setRequestMethod("POST");
			conn.setRequestProperty("Content-Type", "application/json; charset=UTF-8");
			conn.setDoInput(true); 
			conn.setDoOutput(true);
			conn.setRequestProperty("Accept-Charset", "UTF-8");
			
			OutputStream os = conn.getOutputStream();
			os.write(jsonStr.getBytes("UTF-8"));
			os.flush();
			
	        BufferedReader in = new BufferedReader(new InputStreamReader(conn.getInputStream(), "UTF-8"));
            String inputLine;
            StringBuilder response = new StringBuilder();
            while ((inputLine = in.readLine()) != null) {
                response.append(inputLine);
            }
            
            JSONParser parser = new JSONParser();
            JSONArray jsonArray = (JSONArray) parser.parse(response.toString());        
            
            for (Object obj : jsonArray) {
                JSONObject jsonObject = (JSONObject) obj;
                Map<String, Object> map = new HashMap<>();
                map.put("response", jsonObject); // "response"라는 키로 추가
                resultList.add(map);
            }
            
            System.out.println("resultList: " + resultList);
			
			in.close();
			conn.disconnect();;

	
		} catch (Exception e) {
			System.out.println("오류 " + e.getMessage());
			e.printStackTrace();;
		}

		return resultList;
	}

 

3) cors가 뜨지 않도록 설정

내가 가지고 있는 프로젝트는 cors 설정을 해 놨는데, 연결하려는 웹서비스에는 cors 설정이 되어 있지 않다고 한다.

즉, 나만 설정하는게아니라 내가 호출하는 쪽에서도 cors 설정이 되어 있어야 한다는 것.

하지만 담당자가 너무너무 바빠보이고 이거까지 할 시간이 부족한거같아서 2번의 방법을 선택해서 처리했다. 

cros 세팅은 아래와 같다

response.addHeader("Access-Control-Allow-Origin","*");
response.setHeader("Access-Control-Allow-Headers","origin, x-requested-with, content-type, accept");

 

4) cors가 뜨지 않도록 설정

Crome 확장프로그램 이용 ( Allow CROS : Access-Control-Allow-Origin' 설치) 

 

참고사이트

https://devlog-wjdrbs96.tistory.com/429

[Spring] Spring Security, React를 사용하면서 CORS 허용하는 방법

 

https://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=qna_html&wr_id=293213

WWW.PHPSCHOOL.COM

 

https://blog.naver.com/suin2_91/221335631026

ajax 크로스도메인 문제해결/ [Ajax] CrossDomain 설정