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

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

Apr 02, 2018 pm 04:01 PM
ajax 성취하다 입장

이번에는 도메인 간 액세스를 달성하기 위해 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를 사용하여 등록 및 아바타 업로드 기능 구현

Ajax 및 $.ajax 사용 방법

위 내용은 도메인 간 액세스를 달성하기 위해 Ajax를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Huawei 휴대폰에서 이중 WeChat 로그인을 구현하는 방법은 무엇입니까? Huawei 휴대폰에서 이중 WeChat 로그인을 구현하는 방법은 무엇입니까? Mar 24, 2024 am 11:27 AM

Huawei 휴대폰에서 이중 WeChat 로그인을 구현하는 방법은 무엇입니까?

Huawei 휴대폰에서 WeChat 복제 기능을 구현하는 방법 Huawei 휴대폰에서 WeChat 복제 기능을 구현하는 방법 Mar 24, 2024 pm 06:03 PM

Huawei 휴대폰에서 WeChat 복제 기능을 구현하는 방법

PHP 프로그래밍 가이드: 피보나치 수열을 구현하는 방법 PHP 프로그래밍 가이드: 피보나치 수열을 구현하는 방법 Mar 20, 2024 pm 04:54 PM

PHP 프로그래밍 가이드: 피보나치 수열을 구현하는 방법

Ajax를 사용하여 PHP 메소드에서 변수를 얻는 방법은 무엇입니까? Ajax를 사용하여 PHP 메소드에서 변수를 얻는 방법은 무엇입니까? Mar 09, 2024 pm 05:36 PM

Ajax를 사용하여 PHP 메소드에서 변수를 얻는 방법은 무엇입니까?

Golang이 어떻게 게임 개발 가능성을 가능하게 하는지 마스터하세요 Golang이 어떻게 게임 개발 가능성을 가능하게 하는지 마스터하세요 Mar 16, 2024 pm 12:57 PM

Golang이 어떻게 게임 개발 가능성을 가능하게 하는지 마스터하세요

PHP 게임 요구 사항 구현 가이드 PHP 게임 요구 사항 구현 가이드 Mar 11, 2024 am 08:45 AM

PHP 게임 요구 사항 구현 가이드

jQuery AJAX 오류 403 문제를 해결하는 방법은 무엇입니까? jQuery AJAX 오류 403 문제를 해결하는 방법은 무엇입니까? Feb 23, 2024 pm 04:27 PM

jQuery AJAX 오류 403 문제를 해결하는 방법은 무엇입니까?

PHP 대 Ajax: 동적으로 로드되는 콘텐츠를 생성하기 위한 솔루션 PHP 대 Ajax: 동적으로 로드되는 콘텐츠를 생성하기 위한 솔루션 Jun 06, 2024 pm 01:12 PM

PHP 대 Ajax: 동적으로 로드되는 콘텐츠를 생성하기 위한 솔루션

See all articles