반응으로 가져오기에서 cors 도메인 간 요청 구현 방법

이 글에서는 주로 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 날짜 제어, 양방향 바인딩 날짜 형식 방식

iView에서 시간 제어로 선택한 시간이 항상 하루 적다는 문제 해결

IView의 on-change 속성

위 내용은 반응으로 가져오기에서 cors 도메인 간 요청 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!