이 글에서는 주로 fetch in React에서 cors 크로스 도메인 요청을 구현하는 방법을 소개하고 참고하겠습니다.
프로젝트에서는 React를 사용하고 있으며, Ajax 대신 fetch를 사용해야 합니다.
react의 create_react_app 도구는 매우 편리하기 때문에 기본적으로 프로젝트를 생성하고 npm start 명령을 입력하면 자동으로 포트 3000을 수신하고 프런트 엔드 부분이 준비됩니다.
구체적인 참고자료 : https://github.com/facebookincubator/create-react-app
백엔드 부분은 phalcon을 사용했습니다.
프런트엔드와 백엔드가 분리되어 있어서 편의상 nginx에서는 같은 도메인으로 만들려고 했습니다. (프런트엔드와 백엔드 API의 최상위 도메인 이름은 동일합니다.) , 그런데 phalcon 프레임워크는 단일 항목이고, React가 3000을 모니터링할 때 nginx 역방향 프록시를 통해 오류가 발생합니다. js가 문제를 찾을 수 없어 동일한 도메인 공유 계획을 포기했습니다.
그래서 두 개의 도메인 이름을 구성했습니다.
1, www.xxx.com
2, data.xxx.com
첫 번째 도메인 이름은 반응 부분에 사용되며 포트 번호는 3000입니다(디버깅용, 정식 출시는 80)
두 번째 도메인 이름은 API용으로 사용되며, 포트 번호는 80
그래서 크로스 도메인 문제가 발생합니다.
cors에 대한 자세한 소개는 다음을 참조하세요: http://www.jb51.net/article/102694.htm
다음은 도메인 간 도메인 이름 액세스를 허용하는 PHP 부분에 대한 설정입니다
$origin = isset($_SERVER['HTTP_ORIGIN'])?$_SERVER['HTTP_ORIGIN']:''; $allowOrigin = [ 'http://www.xxx.com', 'http://xxx.com' ]; if (in_array($origin, $allowOrigin)) { header('Access-Control-Allow-Origin: ' . $origin); } header('Access-Control-Allow-Methods: PUT,POST,GET,DELETE,OPTIONS'); header('Access-Control-Allow-Credentials: true'); header('Access-Control-Allow-Headers: Content-Type, Accept');
다음은 fetch 부분 ajax 요청입니다.
let postData = {a:'b'}; fetch('http://data.xxx.com/Admin/Login/login', { method: 'POST', mode: 'cors', credentials: 'include', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: JSON.stringify(postData) }).then(function(response) { console.log(response); });
위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
iView에서 시간 제어로 선택한 시간이 항상 하루 적다는 문제 해결
사용 방법에 대한 자세한 설명
위 내용은 반응으로 가져오기에서 cors 도메인 간 요청 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!