이번에는 JS를 사용하여 도메인 간 POST를 구현하는 방법과 JS를 사용하여 도메인 간 POST를 구현하는 Notes에 대해 설명하겠습니다.
javascript Cross-domain은 매우 흔한 문제이며 그 중 jsonp가 가장 많이 사용되는 방법이지만 jsonp는 post가 아닌 get만 지원하므로 일부 데이터를 jsonp를 통해 게시하려는 경우 큰 문제가 발생합니다. .
여기에서는 Post가 iframe에서 양식을 생성하여 구현되고 postMessage를 통해 호출자에게 값을 반환합니다.
첫 번째 단계에서는 먼저 jsonp를 허용하는 백엔드 코드를 구현합니다. 구현에 사용할 언어는 사용자가 직접 결정합니다.
C# 코드는 다음과 같습니다.
protected void Page_Load(object sender, EventArgs e)
{
StringBuilder sbRet = new StringBuilder();
sbRet.Append("<script>");
sbRet.Append(Request["jsoncallback"]);
sbRet.Append("({");
foreach (string k in Request.Form) {
if (k == "jsoncallback") continue;
sbRet.Append("'"+k+"':'"+Request.Form[k]+"'");
}
sbRet.Append("});");
sbRet.Append("</script>");
Response.Write(sbRet.ToString());
Response.End();
}예를 들어 http://localhost/test?jsoncallback=callme
에 전화할 때 나에게 반환하려는 내용은 { userName:'user1', 비밀번호:'pass1' } 입니다.실제로 <script>callme({ userName:'user1', 비밀번호:'pass1' })</script>를 반환할 수 있습니다.
두 번째 단계, d:test.html
<form action="http://localhost/test" method="post"> <input type="text" name="userName" value="user1" /> <input type="text" name="password" value="pass1" /> <input type="text" name="jsoncallback" value="callme" /> <input type="submit" value="提交" /> </form>
와 같은 로컬 폴더에 게시 테스트 페이지를 구축합니다. 3단계, 찾아보고 제출을 클릭하여 반환된 항목이 <script>callme({ userName:' user1'인지 확인합니다. , 비밀번호:'pass1' })</script>는 백엔드 프로그램에 문제가 없음을 의미합니다.
네 번째 단계에서는 위의 html을 구현하기 위한 일반 코드를 작성합니다.
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>测试一哈</title>
</head>
<body>
<script>
//源码 开始
function postJSONP(url, data, callback) {
var template = '<form action="{{url}}" method="post" id="form1">';
for (var k in data) {
template = template
+ ' <input type="text" name="'+k+'" value="'+data[k]+'" />'
}
template = template
+ ' <input type="text" name="jsoncallback" value="function callback(data) { parent.postMessage(data, \'*\'); } callback" />'
+ '</form>'
+ '<'+'script>'
+ 'document.getElementById("form1").submit();'
+ '</'+'script>';
template = template.replace("{{url}}", url);
var p = document.createElement("p");
p.style.display = 'none';
p.innerHTML = '<iframe src=""></iframe>';
document.body.appendChild(p);
var ifrm = p.children[0];
var cwin = ifrm.contentWindow;
cwin.document.write(template);
window.onmessage = function(e) {
if (callback) callback(e.data);
}
}
//源码 结束
//使用测试
window.onload = function() {
postJSONP('http://localhost:59898/WebForm1.aspx', { userName: '张静', password: '就不告诉你' }, function(data) {
console.log(11, data);
});
postJSONP('http://localhost:59898/WebForm1.aspx', { 仓库: '1号大仓', 面积: '2万平米' }, function(data) {
console.log(22, data);
});
}
</script>
</body>
</html>다섯 번째 단계, 보안 문제,
window.onmessage = function(e) {
//可通过 e 来判断来源，并做一些安全方面的处理，此处读者自己去研究吧，可以加个 console.log(e) 看看 e 有哪些内容。
if (callback) callback(e.data);
}이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. PHP 중국어 웹사이트의 기타 관련 기사를 주목해주세요!
추천 자료:
에서 지역 선택기 구성 요소 사용에 대한 자세한 설명위 내용은 JS를 사용하여 도메인 간에 POST를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
