이번에는 도메인 간 액세스를 달성하기 위해 Ajax를 설정하는 방법을 보여 드리겠습니다. 도메인 간 액세스를 달성하기 위해 Ajax를 설정하는 데 필요한 주의 사항은 무엇입니까?
ajax 도메인 간 액세스는 오래된 문제입니다. 더 일반적으로 사용되는 방법은 JSONP 방법이며 이 방법은 GET 방법만 지원하므로 안전하지 않습니다. POST 방법.
jQuery의 jsonp 메소드를 사용하고 유형을 POST로 설정해도 자동으로 GET으로 변경됩니다.
공식 문제 설명:
“script”: 응답을 JavaScript 로 평가하고 이를 일반 텍스트로 반환합니다. 캐시 옵션은 true로 설정됩니다. 참고: 이렇게 하면 원격 도메인 요청에 대한 POST가 GET으로 전환됩니다.
도메인 간에 POST를 사용하는 경우 이를 달성하기 위해 숨겨진 iframe을 생성할 수 있습니다. 원칙은 ajax 업로드와 동일합니다. 이미지, 하지만 이것은 더 번거로울 것입니다.
따라서 Access-Control-Allow-Origin을 설정하여 도메인 간 액세스를 달성하는 것이 비교적 간단합니다.
예를 들어 클라이언트의 도메인 이름은 www.client.com이고 요청한 도메인 이름은 www.server.com
Ajax를 사용하여 직접 액세스하면 다음 오류가 발생합니다
XMLHttpRequest가 http를 로드할 수 없습니다. ://www.server.com /server.PHP. 요청한 resource.Origin에 'Access-Control-Allow-Origin' 헤더가 없습니다. 따라서 'http://www.client.com'에 대한 액세스가 허용되지 않습니다. .
요청된 응답에서 헤더에
// 指定允许其他域名访问
header('Access-Control-Allow-Origin:*');
// 响应类型
header('Access-Control-Allow-Methods:POST');
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with,content-type');를 추가하면 Ajax POST 도메인 간 액세스를 실현할 수 있습니다.
코드는 다음과 같습니다.
client.html 경로: http://www.client.com/client.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title> 跨域测试 </title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<p id="show"></p>
<script type="text/javascript">
$.post("http://www.server.com/server.php",{name:"fdipzone",gender:"male"})
.done(function(data){
document.getElementById("show").innerHTML = data.name + ' ' + data.gender;
});
</script>
</body>
</html>server.php 경로: http://www.server.com/server.php
<?php
$ret = array(
'name' => isset($_POST['name'])? $_POST['name'] : '',
'gender' => isset($_POST['gender'])? $_POST['gender'] : ''
);
header('content-type:application:json;charset=utf8');
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST');
header('Access-Control-Allow-Headers:x-requested-with,content-type');
echo json_encode($ret);
?>Access -Control-Allow-Origin:*은 모든 도메인 이름에서 도메인 간 액세스를 허용한다는 의미
교차 도메인 액세스를 허용하기 위해 도메인 이름을 지정해야 하는 경우 Access-Control-Allow-Origin을 변경하면 됩니다. * Access-Control-Allow- Origin:허용된 도메인 이름
예: header('Access-Control-Allow-Origin:http://www.client.com');
필요한 경우 여러 도메인 이름을 설정접근을 허용하려면 여기에서 사용해야 합니다. php
로 처리하세요. 예를 들어 www.client.com과 www.client2.com이 도메인 간 액세스
server.php를 허용하고 변경하세요. to
<?php
$ret = array(
'name' => isset($_POST['name'])? $_POST['name'] : '',
'gender' => isset($_POST['gender'])? $_POST['gender'] : ''
);
header('content-type:application:json;charset=utf8');
$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';
$allow_origin = array(
'http://www.client.com',
'http://www.client2.com'
);
if(in_array($origin, $allow_origin)){
header('Access-Control-Allow-Origin:'.$origin);
header('Access-Control-Allow-Methods:POST');
header('Access-Control-Allow-Headers:x-requested-with,content-type');
}
echo json_encode($ret);
?>소스코드 다운로드 주소 :http://xiazai.jb51.net/ 201702/yuanma/demo(jb51.net)
다음은 다른 네티즌들이 추가한 내용입니다.
제가 사용하던 시절 cocos2d-js를 사용하여 최근에 게임을 만들려고 했는데
Ajax 교차 도메인 액세스 요청을 로컬에서 사용할 때 오류가 발생했습니다.
XMLHttpRequest가 http://www.zjblogs.com/을 로드할 수 없습니다. 'Access-Control-Allow-Origin' 헤더가 없습니다. 요청한 리소스에 존재하므로 Origin 'null'은 액세스가 허용되지 않습니다.
온라인으로 확인한 결과 해결 방법은 다음과 같습니다.
1. 요청한 URL이 aspx 페이지인 경우 aspx에 코드를 추가해야 합니다. 페이지: Response.AddHeader("Access-Control-Allow-Origin", "*");
2. 요청한 URL이 PHP 페이지인 경우 PHP 페이지에 코드를 추가해야 합니다: header("Access-Control -Allow-Origin: *");
3. 요청한 URL이 정적 HTML 페이지인 경우 페이지에 메타 태그 코드를 추가해야 합니다.
여기서 *는 모든 도메인 이름에 액세스할 수 있음을 의미합니다. 서버가 액세스할 도메인 이름을 결정할 수 있는 경우 위 코드의 "*"를 특정 도메인 이름으로 바꾸는 것이 가장 좋습니다. 이렇게 하면 그에 따라 보안이 강화됩니다.
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
위 내용은 도메인 간 액세스를 달성하기 위해 Ajax를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
