집 >웹 프론트엔드 >JS 튜토리얼 >도메인 간 액세스를 달성하기 위해 Ajax를 설정하는 방법

도메인 간 액세스를 달성하기 위해 Ajax를 설정하는 방법

php中世界最好的语言원래의: 2018-04-02 16:01:481397검색

이번에는 도메인 간 액세스를 달성하기 위해 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( 
 &#39;name&#39; => 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( 
 &#39;name&#39; => 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!