❌❌ CORS 에러 ❌ ❌
: 도메인(ip)이 서로 다를경우 Access 오류로 인하여 데이터를 로드하지 못하는 상황
localhost일때는 문제발생X
해결 :
1. json에서 ajax로 바로 로드가 안됨(CORS) , JSON -> JSP로 변환 후 외부로 송출
2. script 통신(script 파일로 CORS JSON로드방식) - ajax안쓰고 jsp파일에 fileReader로 outprint 해주기
=> 둘다 backend(상대방)에서 작업해줘야함
⚡ 1. JSON -> JSP로 변환 후 외부로 송출
json파일을 바로 핸들링하기 어려우므로 jsp파일을 load후 핸들링
- 내가 로드할 html파일
<body> <input type="button" value="외부데이터 로드" onclick="ajax_data()"> </body> <script type="text/javascript"> function ajax_data(){ var data; var html = new XMLHttpRequest(); html.onreadystatechange = function(){ if(html.readyState == 4 && html.status == 200){ var data = JSON.parse(this.response); console.log(data); } } html.open("GET","http://172.30.1.5:8080/ajax/total.jsp",true); html.send(); } ajax_data(); </script>
- 상대방(backend) 에서 만든 jsp파일
trimDirectiveWhitespaces="true" : 앞뒤 공백 다 없애기<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%> <% //* : 모든 ip 받아주겠단 뜻 , 특정 ip만 받을 경우 ip를 직접 작성해주면 된다 http://172.~ response.addHeader("Access-Control-Allow-Origin", "*"); response.addHeader("Access-Control-Allow-Credentials","true"); //data를 jsp에 직접 넣어야함 //String name = "test"; //out.print(name); //이런식으로 넣으면 됨 %> //여기에 써도됨.. 쭉...배열....=> !doctype~ 없이 이것만 있으면 됨
⚡ 2. script 파일로 CORS JSON로드방식
- 내가 로드할 html 파일
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>script 파일로 CORS JSON 로드 방식</title> </head> <body> <input type="button" value="클릭"> </body> <script> //불러오는 script는 꼭 뒤에 와야함!! function call_result(z){ //backend에서 넘어오는 데이터를 받는 함수 var data = JSON.parse(z); //인자값 형태로 넘오온 데이터를 parse console.log(data) } </script> <script src="http://172.30.1.5:8080/ajax/json.jsp?v=1"></script> </html>
- 상대방(backend) 에서 만든 jsp파일<%@page import="java.io.BufferedReader"%> <%@page import="java.io.FileReader"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="false" %> <% //ajax안쓰고 통신 가능 - cors 해결 response.addHeader("Access-Control-Allow-Origin", "*"); response.addHeader("Access-Control-Allow-Credentials","true"); String url = request.getServletContext().getRealPath("/ajax/"); //웹경로 url = url + "total.json"; //JAVA I/O로 해당 파일을 로드 후 //String에 대한 문자열 객체를 생성하여 데이터를 생성 -> js 함수로 이관 FileReader fr = new FileReader(url); //filereader로 프린팅 BufferedReader br = new BufferedReader(fr); String j = ""; StringBuilder sb = new StringBuilder(); //문자를 배열로(stringbuffer 써도됨) while((j= br.readLine()) != null){ sb.append(j); } br.close(); fr.close(); //필수 - 서버죽음 //out.print(sb); %> call_result('<%=sb%>'); //직접 js코드로 핸들링해줘야함
'CLASS > AJAX' 카테고리의 다른 글
| #3-1 / ajax + .do (0) | 2024.07.02 |
|---|---|
| #2-1 / id 중복체크 연습용(ajax) - POST (0) | 2024.06.24 |
| #1-3 / 🌺 ajax(jquery) (0) | 2024.06.20 |
| #1-2 / ajax + json(key가 있는 배열) => 5초에 한번씩 실행 (0) | 2024.06.20 |
| #1-1 / 🌺 ajax(javascript) 기본 구조 (0) | 2024.06.20 |