<html>
<script>
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
alert(request.responseText);}
}
request.open("GET", "http://naver.com");
request.send();
</script>
</html>
(이 코드는 인터넷익스플로러에서는 원래 실행이안된다.)
단순히 url에서 소스를 alert 해주는 코드인데 실행이 되는브라우저, 안되는 브라우저가있었다.
우선 사파리에서는 실행이 되었다.
파이어폭스나 크롬에서는 실행이되지 않았다.
이전에 openweathermap api를 사용할때는 잘되었는데 왜 안되는지 의문이었다.
생활코딩에 물어본결과
보안의 문제였는데
(파이어폭스의 웹개발도구의 웹콘솔을 실행해보면
교차 원본 요청 차단: 동일 출처 정책으로 인해 [요청한 도메인]에 있는 원격 자원을 읽을 수 없습니다. 자원을 같은 도메인으로 이동시키거나 CORS를 활성화하여 해결할 수 있습니다.
라는 에러가 나온다.)
크롬에서는 Allow-Control-Allow-Origin이라는 확장도구를 깔아서 해보라는것이였다.
일단 확장도구를 추가하니 크롬에서는 잘 실행되었다.
문제는 파이어폭스인데 파이어폭스에도 CORS를 활성화 할수있는 확장도구를 깔아서 실행해봤지만 되지 않았다.
문제는 자바스크립트에서 ajax(XMLHttpRequest())요청을 외부서버로 보내게되면 에러가 난다는 것이다.
그럼 방법은
1. 확장도구를 쓰거나 2.같은 서버를 쓰거나 3.서버에서 외부의 요청을 허용해주거나 세가지가 있다.
1번은 파이어폭스에서 안되어서 3번의 방법을 써보았다.
나는 라즈베리파이에서 파이썬의 bottle api를 이용해 서버를 만들었었는데
단순히 response.headers['Access-Control-Allow-Origin'] = '*' 코드를 추가해주니 서버에 접근이 가능했다.
파이어폭스에서 openweathermap api를 사용할수 있었던것도 서버에서 요청을 허용해주었기때문이었다.
'FALL in > G.MA's 개발일지' 카테고리의 다른 글
| php, mysql 연결 실패 문제 (0) | 2017.07.30 |
|---|---|
| [Javascript] Json/Openweathermap(날씨 API) 사용하기 (0) | 2017.07.07 |
