JSONP JS 크로스 오 버 문제 해결 실현

현대 프로 그래 밍 에서 앞 뒤 단 은 모두 분리 배치 되 었 고 앞 단 은 자신의 도 메 인 이 있 으 며 백 엔 드 도 자신의 도 메 인 이 있다.브 라 우 저 와 같은 소스 정책 의 제한 으로 인해 같은 소스 에서 요청 하지 않 으 면 도 메 인 간 문제 가 발생 할 수 있 습 니 다.크로스 도 메 인 문 제 를 해결 하 는 방법 은 CORS(cross orign resources share)와 JSONP 등 여러 가지 가 있다.여기 서 제 이 슨 p 의 해결 방안 을 중점적으로 소개 하 겠 습 니 다.
기초 개념
같은 소스 정책:같은 프로 토 콜,같은 도 메 인 이름,같은 엔 드 구호.세 가 지 를 만족 시 키 지 않 는 다 면 그 중 하 나 는 모두 크로스 오 버 문제 에 속한다.
몇 가지 간단 한 예 를 들다
1: https://www.a.com:8080도착 하 다http://www.a.com:8080도 메 인 이름,포트 는 같 지만 프로 토 콜 은 다 릅 니 다.
2: https://www.a.com:8080도착 하 다https://www.b.com:8080도 메 인 간 요청(프로 토 콜,포트 는 같 지만 도 메 인 이름 은 다 릅 니 다)
3: https://www.a.com:8080도착 하 다https://www.a.com:9090도 메 인 간 요청(프로 토 콜,도 메 인 이름 은 같 지만 포트 는 다 릅 니 다)
크로스 필드:크로스 필드 의 안전 제한 은 모두 브 라 우 저 측 에 있 는 것 이 고 서버 측 에 크로스 필드 안전 제한 이 존재 하지 않 습 니 다.브 라 우 저의 동원 정책 은 원본 에서 불 러 온 문서 나 스 크 립 트 와 다른 원본 에서 온 자원 의 상호작용 을 제한 합 니 다.
2.JSON 과 JSONP 구별

JSON 의 전 칭 은 JavaScript Object Notation 이 고 경량급 데이터 인 터 랙 션 형식 입 니 다.이 는 ECMAScript(유럽 컴퓨터 협회 가 제정 한 js 규범)의 키 집합 을 바탕 으로 프로 그래 밍 언어 에 완전히 독립 된 텍스트 형식 으로 데 이 터 를 저장 하고 표시 합 니 다.쉽게 말 하면 제 이 슨 은 데 이 터 를 전송 하 는 데이터 형식 이다

JSONP 는 비공 식 전송 프로 토 콜 입 니 다.이 프로 토 콜 의 요점 은 사용자 가 콜백(또는 처음부터 리 셋 방법 을 정의)파 라 메 터 를 서버 에 전달 한 다음 에 서버 에서 데 이 터 를 되 돌려 줄 때 이 콜백 파 라 메 터 를 함수 이름 으로 JSON 데 이 터 를 감 싸 는 것 입 니 다.이렇게 하면 클 라 이언 트 는 자신의 함 수 를 마음대로 맞 춰 서 데 이 터 를 자동 으로 처리 할 수 있다

3.같은 기원 에서 벗 어 나 는'편안 한 링'
웹 페이지 에서 js 파일 을 호출 하 는 것 은 크로스 필드 문제 의 영향 을 받 지 않 는 다 는 것 을 알 게 되 었 습 니 다.그리고 우 리 는 src 라 는 속성 을 가 진 태그 가 모두 도 메 인 을 뛰 어 넘 는 능력 을 가지 고 있다 는 것 을 발견 했다.예 를 들 어 img 과 script 이다.html 페이지 에서 우 리 는 그림 을 도입 하 는 작업 을 자주 합 니 다.img 태그 의 src 속성 을 통 해 정적 자원 을 요청 할 수 있 습 니 다.

우 리 는 이것 이 본질 적 으로 GET 요청 이라는 것 을 알 수 있다.마찬가지 로 링크 와 script 의 href 와 src 역시 GET 요청 을 통 해 자원 을 요청 할 수 있다.

<script src="http://localhost:9090/api"></script>

우 리 는 이것 이 본질 적 으로 GET 요청 이라는 것 을 알 수 있다.마찬가지 로 링크 와 script 의 href 와 src 역시 GET 요청 을 통 해 자원 을 요청 할 수 있다.이들 은 동원 전략의 영향 을 받 지 않 았 다.jsonp 의 실현 원 리 는 바로 이 전략의 작은'bug'를 이용 하여 요 구 를 뛰 어 넘 는 것 이다.GET 요청 인 이상 서버 는 이 요청 을 받 고 응답 할 수 있 습 니 다.다음은 구체 적 으로 실현 해 봅 시다!
4.원리 와 크로스 필드 실현
구체 적 인 절차(원리)
jsonp 의 실행 절 차 는 사실 간단 한 두 단계 이다.첫째,백 엔 드 에서 들 려 오 는 데 이 터 를 받 아들 일 수 있 도록 전단 에 파 라 메 터 를 미리 정의 합 니 다.둘째,백 엔 드 에서 server 서 비 스 를 시작 하여 전송 할 데 이 터 를 정 의 된 리 셋 함수 이름 에 결 과 를 되 돌려 주 는 방식 으로 전단 에 전달 합 니 다.

//     
<script>
  // 1 callback
  // 2    callbackName(  )
  function onResponse(posts) {
    console.log(posts);
  }
  //       
</script>
<!--        -->
<!--    -->
<script src="http://localhost:9090/api"></script>

//    
const http = require('http');
http.createServer((req, res) => {
  if (req.url === '/api') {
    let posts = ['js', 'php'];
    res.end(`onResponse(${JSON.stringify(posts)})`);
  }
})
.listen(9090, () => {
  console.log(9090)
})

 
전단 script 의 src 요청 이 완료 되면 백 엔 드 는 전단 에 문자열 onResponse(["js","phop"])를 되 돌려 줍 니 다.script 태그 때문에 브 라 우 저 는 이 문자열 을 js 로 실행 합 니 다.이렇게 해서 우 리 는 처음에 전단 에서 정 의 된 리 셋 이 실 행 될 것 이 고 우 리 는 데 이 터 를 얻 었 다.
포장 하 다
이상 은 간단 한 요청 이 있 을 뿐 실제 항목 에 많은 요청 이 있 을 것 입 니 다.우 리 는 한 줄 의 script 태그 와 반전 함 수 를 정의 할 수 없 을 것 입 니 다.이렇게 쓴 코드 는 너무 융통성 이 없다.패 키 징 의 목적 중 하 나 는 전단 에서 리 셋 함수 의 이름 을 유연 하 게 수정 할 수 있 기 위해 서 입 니 다.앞 뒤 에서 리 셋 함 수 를 죽 이 는 것 이 아 닙 니 다.동시에 코드 를 봉 한 후에 우 리 는 수 동 으로 리 셋 함 수 를 만 들 지 않 아 도 된다.봉 인 된 함 수 는 src 의 주 소 를 자동 으로 넣 고 리 셋 함수 이름 을 자동 으로 만 드 는 것 을 도와 준다.

//   
const http = require('http');
const url = require('url');
http.createServer((req, res) => {
 // /api?callback=onResponse
 //       url  callback 
 if(req.url.includes('/api')) {
  let myurl = url.parse(req.url);
  let params = new URLSearchParams(myurl.query)
  let posts = ['js', 'php'];
  let mathodName = params.get('callback');
  res.end(`${mathodName}(${JSON.stringify(posts)})`)
 }
})
.listen(9090, () => {
 console.log(9090);
})

//   （    body   ）
<script>
 function jsonp(url, options) {
  //     
  const { timeout } = options;
  return new Promise((resolve, reject) => {
   //        
   let funcName = `jsonp${Date.now()}`;
   let time = null, scriptNode;
   //   callback
   window[funcName] = function(data) {
    if (timeout) clearTimeout(time);
    resolve(data);
    //          
    //               script  
    delete window[funcName];
    document.body.removeChild(scriptNode);
   }
   //   script  
   scriptNode = document.createElement('script');
   //  script    src  
   scriptNode.src = `${url}?callback=${funcName}`;
   //     
   document.body.appendChild(scriptNode);
   time = setTimeout(() => {
    reject('network err, timeout')
   }, timeout)
   //   
   scriptNode.onerror = function(err) {
   reject(err);
   }
  })
 }
 jsonp('http://localhost:9090/api', {
  callBack: 'res1',
  //     
  timeout: 3000
 })
 //     
 .then(res => {
  console.log('jsonp->', res);
 })
 //     
 .catch(err => {
   console.log("network err!")
 })
</script>

 
총화
1:장점

XML HttpRequest 대상 이 실현 한 Ajax 요청 처럼 같은 소스 정책 의 제한 을 받 지 않 습 니 다

호환성 이 더 좋 고 더 오래된 브 라 우 저 에서 실행 할 수 있 습 니 다.XML HttpRequest 나 ActiveX 의 지원 이 필요 없습니다

4.567917.또한 요청 이 끝 난 후에 콜 백 을 호출 하 는 방식 으로 결 과 를 전송 할 수 있 습 니 다2:단점
POST 등 다른 유형의 HTTP 요청 대신 GET 요청 만 지원 합 니 다.
크로스 도 메 인 HTTP 요청 만 지원 합 니 다.서로 다른 도 메 인 두 페이지 간 에 자바 스 크 립 트 호출 을 어떻게 하 는 지 해결 할 수 없습니다.
JSONP 가 JS 크로스 도 메 인 문 제 를 해결 하 는 실현 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.JSONP 가 JS 크로스 도 메 인 을 해결 하 는 내용 에 대해 서 는 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부탁드립니다!