JS를 사용하여 가장 간단한 도메인 간 달성 방법

이번에는 JS를 사용하여 가장 간단한 크로스 도메인을 달성하는 방법과 JS를 사용하여 가장 간단한 크로스 도메인을 달성할 때 주의할 점은 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

어느 날 누군가가 나에게 Cors의 원리가 무엇인지 물었습니다. 나는 크로스 도메인에 대해 jsonP만 알고 있었기 때문에 자랑할 기회를 잃을 뻔했습니다.
"지금은 좀 바빠서 나중에 봐요".
똑똑해서 바로 내 작업 스테이션인 바이두바이두바이두로 돌아왔습니다.

동일 전략

진부한 이야기입니다. 우리 가족이 아니라면 당연히 장난을 칠 수 없습니다.
동일한 출처가 아닌 스크립트는 다른 도메인(예: DOM 등)의 페이지 개체에 액세스하거나 작동할 수 없습니다. 동일한 출처 정책에는 동일한 도메인, 동일한 프로토콜 및 동일한 포트라는 세 가지 동일한 출처가 필요합니다. .

교차 도메인 방식

이 글에서는 jsonP와 cors만 소개합니다.

jsonP

<!-- 开发环境版本，包含了用帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

vue 문서에 vue.js를 도입하는 방식입니다. script 태그를 사용하면 다른 도메인의 JS 파일을 직접 요청할 수 있는 것을 알 수 있습니다. 이 경우 이 기능을 사용하여 도메인 간을 달성할 수 있습니다.

간단한 서버 구축

nodejs+express를 사용하여 간단한 서버를 구축하세요. 몇 줄의 코드로 충분합니다.

const express = require('express');const app = express();
app.get('/user',(req,res)=>{  console.log('user');
  res.send(‘success’);
})
app.listen(3000,()=>{  console.log('start');
});

서버를 시작하세요. 그런 다음 테스트 함수를 작성하고 먼저 ajax를 사용해 보세요.

function getUserAjax(){  let xhr= new XMLHttpRequest();
  xhr.open("GET","http://127.0.0.1:3000/user",true);
  xhr.send();
}

Chrome 콘솔에서 getUserAjax 함수를 실행하세요.

거부되어 브라우저가 성공적으로 성공하지 못한 것을 볼 수 있습니다. 이때 jsonP를 사용해야 합니다. 스크립트 태그 자체가 도메인 전체에 걸쳐 JS 파일을 요청할 수 있기 때문입니다.

function getUser(){  let dom = document.createElement('script');
  dom.src = "http://127.0.0.1:3000/user";  document.body.appendChild(dom);
}

콘솔에서 getUser()를 실행하세요.

성공에는 정의가 없습니다. 브라우저가 도메인 전반에 걸쳐 '성공'을 얻은 것을 볼 수 있습니다. script 태그로 로드된 JS는 즉시 실행되며, 성공 여부가 정의되지 않아 해당 오류가 보고되었습니다. 이때까지는 분명했습니다. 프런트 엔드에서 요청을 보내면 콜백과 같은 함수 이름이 백엔드로 전달되고 백엔드는 이 함수인 callback(info)을 반환합니다. 이런 방식으로 브라우저는 데이터를 수신한 후 콜백 함수와 마찬가지로 즉시 콜백 함수를 실행합니다. 즉시 수정 시작:
프런트 엔드 코드:

function callback(info){
  alert(info);
}function getUser(){  let dom = document.createElement('script');
  dom.src = "http://127.0.0.1:3000/user?callback=callback";  //url上指明回调函数的名字
  document.body.appendChild(dom);
}

백엔드 코드:

const express = require('express');const app = express();
app.get('/user',(req,res)=>{  let func = req.query.callback;
  res.send(func+'(' + '"success"'+')');
});
app.listen(3000,()=>{  console.log('start');
});

Execute getUser() 성공이 다시 나타납니다. 이것이 jsonP가 작동하는 방식입니다. 백그라운드는 JS 함수를 반환하고, 매개변수를 취하고, 프런트 엔드에서 준비된 함수를 호출합니다. 즉, 요청과 콜백 함수를 보내는 효과가 달성됩니다.

cors

이것은 훨씬 더 간단합니다. 이 오류는 위의 ajax가 도메인 간일 때 보고되었습니다. 요청한 resource에 'Access-Control-Allow-Origin' 헤더가 없습니다.
서버가 돌아올 때 ''Access-Control-Allow-Origin''을 가져오시면 됩니다. 그가 의미하는 것은 요청 소스가 허용된다는 것입니다. 당신은 우리 가족이 아니지만 이번에는 당신을 믿고 열쇠를드립니다.
백그라운드 코드를 수정하세요:

const express = require('express');const app = express();
app.get('/user',(req,res)=>{
  res.header("Access-Control-Allow-Origin", "*");  //设置返回数据的头，代表接受任意源的请求
  res.send('success');
});
app.listen(3000,()=>{
  console.log('start');
});

그런 다음 콘솔에서 위의 getUserAjax()를 호출하세요. 성공. 프런트엔드 코드를 변경할 필요가 없습니다. 그러나 모든 브라우저가 cor를 지원하는 것은 아닙니다.

jsonP와 cors의 비교

cors는 jsonP와 동일한 목적을 가지고 있지만 jsonP보다 더 강력합니다.
jsonP는 GET 요청만 지원하고 cors는 모든 유형의 HTTP 요청을 지원합니다. jsonP의 장점은 이전 브라우저를 지원하고 CORS를 지원하지 않는 웹사이트에서 데이터를 요청할 수 있다는 것입니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

js 기본 개선 학습을 위한 기본 데이터 유형

JS를 사용하여 해시 테이블과 순차 목록을 사용자 정의하는 방법

위 내용은 JS를 사용하여 가장 간단한 도메인 간 달성 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!