cross-domain 해결방안 - JSONP

JSONP 란?

개발을 하다보면 어쩔 수 없이 다른 도메인으로부터 데이터를 가져와야 하는 경우가 많기에 많은 사람들이 cross-domain 이슈를 겪고 있습니다.

이런 경우 사용할 수 있는 것이 JSONP(JSON with Padding)입니다.

http://sugerent.tistory.com/424 참고

1. PHP - 요청한 콜백함수를 통해 데이터를 전달한다.

<?php  header('Content-Type: application/javascript;charset=UTF-8'); include "../../DBconnection/conn.php"; //DB 연동 include "../util/user_func.php"; $mycallback = $_REQUEST['callback']; //request 쪽에서 명시한 myCallback에 해당한다. $sql = "SELECT * FROM test_poscategory"; //데이터베이스 SELECT $result = mysql_query($sql, $connect); while($row = mysql_fetch_array($result)) { $TEST[] = array("T1" => $row[T1], "T2" =>$row[T2]); //데이터를 저장 } $json_test = json_encode($TEST); echo $mycallback."(".$json_test.")"; \ mysql_free_result($result); mysql_close($connect); ?>

2-1. NODE JS(Javascript) - JSONP로 PHP서버에 접속하여 데이터를 가져온다.

let menu_list = new Array(); //로컬 서버 저장 배열 $.ajax({              type: "POST",             url: "페이지.php",             dataType: "jsonp",             async : false,             jsonpCallback : "myCallback",             success: function(menulist) {               menu_list.push(menulist) //결과값 저장               $.ajax({ //routers로 전송                 url : '/insert',                 type : 'post',                 data : {                        'menulist' : JSON.stringify(menu_list[0]),  //서버로 데이터 전송                 },                 success: function(result) {},                 error: function(request, status, error) {                 }               });             },             error: function(err) {               console.log('실패 - ', err);             }           });

2-2. NODE JS(Javascript) - JSONP로 PHP서버에 접속하여 데이터를 가져온다.

$.getJSON("페이지.php?callback=?", function(data) {     console.log(data)     }   );

2-1이나 2-2 중에 원하는걸 사용하셔도 된다.

단, 2-1을 ajax형태로 data를 하면되고 2-2는 php?id=id& 이런식으로 get 타입으로 넣는다.

3. NODE JS(routers) - 전송받은 데이터를 서버 DB에 저장 

router.post('/insert', async (req, res) => {   const menulist = JSON.parse(req.body.menulist);   //db저장 소스 작성   res.send('end'); });