다른 도메인에 있는 결과 값을 읽어오려는데 이런 에러가 난다.
Failed to load URL : No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
jquery.js:2 XHR finished loading: POST "URL".
기존에는 해당 사이트에 Access-Control-Allow-Origin설정을 했었는데..
계속 사용을 해야 하는 부분인데 매번 각 사이트 마다 요청을 할 수는 없으니까.
내가 다른 방법을 찾아야 했다.
그래서 찾은게 jsonp이다..
사용방법은 ajax랑 비슷한데
type은 GET만 된다는 곳도 있고 post도 사용가능 하다는 곳도 있다.
방법은 찾아보면 많이 나옴.
그런데 지금 문제는 콜백함수를 찾을 수 없다는 에러가 계속 난다.
함수를 만들어 줘도 인식이 안되고..
=======================
해결함
해결이라기 보다는 이해했음
jsonp를 사용하면 함수를 쓴다고 보면된다.
리턴 받는 데이터가
[{"name":"이름1","type":"메인","title":"메인헤드라인 1 기사 제목","url":"http://www.naver.com","cre_date":"2017. 07. 05"}
,{"name":"이름2","type":"메인","title":"메인헤드라인 2 기사 제목","url":"http://www.naver.com","cre_date":"2017. 07. 06"}]
이런식으로 온다고 치면
jsonp를 사용하여 크로스 도메인 문제를 해결 하려고 할 때는
news( [{"name":"이름1","type":"메인","title":"메인헤드라인 1 기사 제목","url":"http://www.naver.com","cre_date":"2017. 07. 05"}
,{"name":"이름2","type":"메인","title":"메인헤드라인 2 기사 제목","url":"http://www.naver.com","cre_date":"2017. 07. 06"}] )
이렇게 임의의 리턴 함수를 만들어 줘야 한다. (위의 값에서는 news( ) )
post로 해도됨
$.ajax({
type:'POST',
url:url,
dataType:'jsonp',
jsonpCallback: "news", <------------- 이게 리턴 받을 함수명
...
});
위의 ajax을 호출했을 때 리턴값이
<script>
news(
[{"name":"이름1","type":"메인","title":"메인헤드라인 1 기사 제목","url":"http://www.naver.com","cre_date":"2017. 07. 05"}
,{"name":"이름2","type":"메인","title":"메인헤드라인 2 기사 제목","url":"http://www.naver.com","cre_date":"2017. 07. 06"}]
)
</script>
이렇게 온다고 생각하고
그래서 news함수를 호출한다고 생각하면 된다.
이걸 추가안해서 계속 함수를 찾을 수 없다고 에러가 났던 것이다.
내가 news라고 한 부분이 일치해야 다른 도메인끼리도 통신을 할 수 있다.
끝.
'차근차근 > JAVA Script' 카테고리의 다른 글
| 화면 맨 위로 이동 + a태그에 js연결할 때 화면 맨 위로 이동x (0) | 2021.12.01 |
|---|---|
| [Javascript] PC, MOBILE 구분하기 (Navigator 사용) (0) | 2021.12.01 |
| 일치하는 글자에 태크넣기.. (0) | 2017.10.26 |
| 네이버 지도 api v3 적용 (0) | 2017.02.22 |
| JavaScript Strings (0) | 2016.02.15 |