ajax를 axios 로 대체 하려고 합니다. 어떤식으로 바꿔야하는지요 채택완료
안녕하세요.
ajax통신으로 문제가 자주 발생해 axios 로 대체해보려고 합니다.
제이쿼리 처럼 상단에
>
선언하고 사용 가능한지요?
아작스로 한 부분을 axios 로 어떻게 변경하나요..?
</p>
<p><script type="text/javascript" src="<a href="<a href="http://code.jquery.com/jquery-1.8.3.min.js"></script" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-1.8.3.min.js"></script</a>"><a href="http://code.jquery.com/jquery-1.8.3.min.js"></script" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-1.8.3.min.js"></script</a></a>></p>
<p> </p>
<p><script>
function login_app()
{
$.ajax({
url: '<a href="<a href="https://api.주소~~'" target="_blank" rel="noopener noreferrer">https://api.주소~~'</a>"><a href="https://api.주소~~'" target="_blank" rel="noopener noreferrer">https://api.주소~~'</a></a>
type: "POST",
dataType: 'json',
data: {
identifier: $("#identifier").val(),
password: $("#password").val(),
},
success: function(data) {
alert('성공--' + data['user']['username']);</p>
<p> console.log(data);
} ,
error : function(){
alert("AJAX Failed!");
}
});</p>
<p>}
</script></p>
<p>------- axios 변경중 ------------------------------------------</p>
<p><script src="<a href="<a href="https://unpkg.com/axios/dist/axios.min.js"></script" target="_blank" rel="noopener noreferrer">https://unpkg.com/axios/dist/axios.min.js"></script</a>"><a href="https://unpkg.com/axios/dist/axios.min.js"></script" target="_blank" rel="noopener noreferrer">https://unpkg.com/axios/dist/axios.min.js"></script</a></a>></p>
<p> </p>
<p><script>
function login_app()
{
axios({
method: 'post',
url: '<a href="https://api주소~~~," target="_blank" rel="noopener noreferrer">https://api주소~~~,</a>
data: {
identifier: <a href="mailto:'lsp@nate.com'">'lsp@nate.com'</a>,
password: '1234',
}</p>
<p>~~~~? 구현 방법~
});
}</p>
<p></script></p>
<p>
답변 4개
아... 왜 이걸 이제 발견했는지;;
ie11에서 jquery ajax No Transport error 에 관한 내용입니다
https://stackoverflow.com/questions/9160123/no-transport-error-w-jquery-ajax-call-in-ie
실제 api url 에서 Access-Control-Allow-Origin을 허용해줘도
jquery 옵션에 명시해줘야 되는군요
아래 코드 cors / crossDomain 부분이요
</p>
<p><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script></a>
</head>
<body>
<script>
<strong>$.support.cors = true;</strong>
$(function() {
$.ajax({
type: "GET",
url: '<a href="https://project-team.upbit.com/api/v1/disclosure?region=kr&per_page=5'," target="_blank" rel="noopener noreferrer">https://project-team.upbit.com/api/v1/disclosure?region=kr&per_page=5',</a>
cache: false,
dataType: 'json',
<strong> crossDomain: true,</strong>
success: function(data) {
console.log(data);
},
error : function(xhr, status, error) {
console.log(xhr, status, error); // No Transport
}
});
});
</script>
</body>
</html></p>
<p>
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
+ ajax 통신
http://lsp80.cafe24.com/3.html">http://lsp80.cafe24.com/20.html
+axios 통신
http://lsp80.cafe24.com/3.html">http://lsp80.cafe24.com/3.html
개발자도구에서 IE8로 바꿔서 테스트해보면 둘다 동작을 안합니다..
제이쿼리 1.12 사용했고..
답변에 대한 댓글 3개
<!doctype html>
html, head, body
ie 개발자도구에 있는 에뮬레이터는
실제 브라우저하고 좀 차이가 있더라고요
완벽히 같은 상황을 재현해 주진 않아요
옛날에 저는 버추얼머신에 윈도우7 ie9 세팅해가지고
보면서 테스트했던 아련한 기억이 있네요 ㅠㅠ
그런데, 현재 그렇게 할 정도로 서포트 해야할 이유가 있을까 싶어요
이건
ie11 에뮬레이션 문서모드 ie8 에이전트문자열 ie8 에서 해봤을 때
오류는 없고 response 도 제대로 찍히네요
아... 통신이 안되는군요
댓글을 작성하려면 로그인이 필요합니다.
두 스크립트가 같은겁니다.
하나만 쓰는 걸로~
ie11에서 Promise 오류를 위해 bluebird 추가요
</p>
<p><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js"></script></a>
<script src="<a href="https://unpkg.com/axios/dist/axios.min.js"></script>" target="_blank" rel="noopener noreferrer">https://unpkg.com/axios/dist/axios.min.js"></script></a>
</head>
<body>
<script>
axios({
method: 'get',
url: '<a href="https://jsonplaceholder.typicode.com/todos/1'," target="_blank" rel="noopener noreferrer">https://jsonplaceholder.typicode.com/todos/1',</a>
responseType: 'json'
})
.then(function (response) {
console.log(response)
});
</script>
</body>
</html></p>
<p>
답변에 대한 댓글 3개
한가지..
이건 ajax로 했을때도 같은 문제인데 IE브라우져에서 F12누른후 IE8 로 해놓으면
왜 동작을 안하는거죠?
실제로 IE8 사용자가 동작이 안된다고 해서 axios 로 변경도 했는데...
axios 브라우저 서포트를 참고해보세요
https://www.npmjs.com/package/axios
jquery brower support
https://jquery.com/browser-support/
If you need to support older browsers like Internet Explorer 6-8, Opera 12.1x or Safari 5.1+, use jQuery 1.12.
ajax 로 처리하는게 맞는데
ajax통신이 안되었던 이유는
IE9 이하의 버전이고 http --- https 통신으로 갈때 이 두가지 상황이
겹칠때 엑세스가 거부되는 현상을 찾았습니다.
IE10 이상은 http -- https 통신이 자유롭습니다.
답변 주신 많은 분들 감사합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
두줄만 선언해 주면 사용가능하던데 혹시 제가 놓친 부분이 있을까요?
정상 동작을 안하는거 같아요..
구현은
<script>
function login_app()
{
axios.post('https://api.주소~~', {
identifier: $("#identifier").val(),
password: $("#password").val(),
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
</script>
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
그렇게 해도 안되네요.
서버api 개발자분께 물어보니 크로스도메인 전체 허용이라고 하네요..
어느정도 기능은 돌아가는데 문제는
익스 8 ~9 버전에서 동작을 안하네요.
곧 정리해서 다시한번 올리겠습니다.