효과 문제가 아니라 가져 오기와 관련이 있어야합니다. 교차 도메인?

교차 도메인 요청을하고 요청을 만들기 위해 axios로 변경했습니다. 모든 것이 정상입니다. 교차 도메인을 지원하려면 가져 오기에 어떤 매개 변수를 구성해야합니까?

구체적으로 시도하지는 않았지만 가져 오기 문서를 보면 도메인 간 처리가 XMLHTTPRequest와 일치한다고합니다. 쿠키를 가져 오지 않았다는 사실과 관련이 있을까요? https://www.npmjs.com/package/whatwg-fetch#sending -cookies

내 프로젝트에서 서버는 GO 언어로 작성되었으며 서버가 도메인 간 지원 / 허용으로 구성되어있는 한 클라이언트를 가져 오는 데 추가 구성이 필요하지 않습니다.

@xaviertung 은 문제를 분석 / 찾기 위해 서버 로그를 확인하는 것을 고려할 수

2016 년 11 월 18 일 오전 8시 30 분에 chencheng (云 谦) [email protected] 은 다음과 같이 썼습니다.

구체적으로 시도하지는 않았지만 가져 오기 문서를 보면 도메인 간 처리가 XMLHTTPRequest와 일치한다고합니다. 쿠키를 가져 오지 않았다는 사실과 관련이 있을까요? https://www.npmjs.com/package/whatwg-fetch#sending -cookies https://www.npmjs.com/package/whatwg-fetch#sending -cookies
—
이 스레드를 구독했기 때문에이 메시지가 전송되었습니다.
이 이메일에 직접 답장하거나 GitHub https://github.com/dvajs/dva/issues/282#issuecomment -261413729에서 확인하거나 https://github.com/notifications/unsubscribe-auth/ACv7UniRkGq0Uv8XFBUeNMe5jBeGyWpQks5q_PKgaJpQks5q_PKgaJpQks5q_PKgaJpQks5q 4

감사합니다. 문제가 해결되었습니다. 모드 및 자격 증명 설정의 문제입니다.

해결 방법, 계획에 대해 얘기해 볼까요? 다른 사람들이 나중에 만날 수 있습니다.

1. 가져 오기에서 발생한 오류는 문제를 명확하게 찾지 못했고 도메인 간 문제임을 알기 위해 Promise 솔루션 (axios)으로 변경되었습니다.
   2. 인터넷에서 도메인 간 문제를 쉽게 해결할 수있는 게시물을 찾았고, 모드를 no-cors로 설정하고 우회했습니다.
   3. 마지막으로 fetch의 공식 문서를 읽고 fetch에 대해 더 깊이 이해했고, 마지막으로 모드 cors를 설정하여 문제를 해결했습니다.
   요약 : 도메인 간 문제를 해결하기위한 핵심은 xhr 및 http 프로토콜을 이해하는 데 있습니다. 모드를 Cors 및 no-cors로 지정하는 것의 가장 큰 차이점은 cors가 요청을 보내기 전에 옵션 s를 통과한다는 것입니다. 영역.

@sorrycc 선생님, 교차 도메인 가져 오기에도 문제가 발생했습니다. 가져 오기 요청을 사용한 후 콘솔에 200 옵션 요청이 나타났습니다. 배경은 중단 점을 입력 할 수 있습니다. 판단 방법은 GET (내 실제 요청)이고 프론트 엔드는 response.json ()을 사용합니다. 백그라운드 데이터도 가져올 수 있지만 콘솔에는 GET 요청 기록이없고 옵션 만 있습니다. ajax를 사용하면 모든 것이 정상입니다. 콘솔에는 옵션 및 GET 요청이 모두 있습니다.

@AsceticBoy 는 콘솔에 문제가있는 것 같습니다. 필터링 기능이 있습니까?

@xaviertung 교차 사이트 프런트 엔드는 모드를 설정하기
헤더에 자격 증명 : 'include'를 추가했으며 요청이 허용되지 않는다는 오류를보고합니다.
지금은 디버깅이 번거롭고 매번 비용 도메인을 변경 한 다음 프런트 엔드를 컴파일하고 디버깅을 위해 백 엔드 프로젝트에 넣어야합니다.
내가 사용하는 nginx + tomcat (봄) 백엔드를 설정하려면 어떻게해야합니까?감사합니다

@wuyongdec 은 도메인 간 구성을 허용하기 위해 서버가 열려 있는지 확인해야합니다.

@wuyongdec dora는 도메인 간 디버깅을 지원합니다.

@xaviertung 서버가 열렸지만 자격 증명 : 'include'가 추가되었을 때 서버가 거부되었습니다.

@jingchenxu 문서가 있습니까?

.roadhogrc에서 프록시가 구성되지 않았기 때문에이 문제가 발생했습니다. 프롬프트는 도메인 간 문제이기도합니다.

대상의 http://jsonplaceholder.typicode.com/ 을 자신의 서버 주소로 변경하십시오.
"proxy": { "/api": { "target": "http://jsonplaceholder.typicode.com/", "changeOrigin": true, "pathRewrite": { "^/api" : "" } } }

@wuyongdec 나도 당신과 같은 문제가 발생했습니다. 해결 했습니까? 어떻게 해결 되었습니까?

도메인 간 구성을 위해 프런트 엔드와 백 엔드를 분리하십시오! ! ! 비 쿠키 인증, JWT 인증 구성! !
도메인 간 요청에 대한 무능력을 해결하고,
먼저 config.js에 프록시를 설정하지 마십시오.이 구성은 로컬 개발에만 사용할 수 있으며 빌드 후에는 유효하지 않습니다.

내 계획:
.env에서 구성 (아니라면 루트 디렉토리에 생성)
API를 요청할 때 서버 주소를 읽으십시오. (request.js 수정)

nghin / apache / php 서버 플러스
add_header Access-Control-Allow-Origin * always; ### (Nginx 1.7.5 이후)

add_header Access-Control-Allow-Methods GET, POST, OPTIONS, HEAD, PUT;
add_header Access-Control-Allow-Headers "Authorization, Content-Type";

프런트 엔드 펜치 :
credentials : 'omit'// 이것은 쿠키가 전송되지 않으며 교차 도메인 요청이 필요함을 의미합니다.
머리글:{
인증 : localStorage.getItem ( 'login-token'),
}

이 중 "권한 부여"는 서버 측 인증 방법에 따라 서로 다른 서버의 다른 구성을 의미합니다.

내가 여기서 한 일을 기록하십시오.
도메인 이름이 일치하지 않는 경우 백엔드가 교차 도메인을 지원하는지 확인하십시오.
200400500에 관계없이 Access-Control-Allow-Origin 및 기타 정보를 전달해야합니다.
다음 두 매개 변수는 가져 오기 헤더에서 전달됩니다.

{
  mode: 'cors',
  credentials: 'include',
}

nginx 서버는 다음 헤더를 작성합니다.

add_header Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Keep-Alive,User-Agent,Cache-Control,Content-Type,Authorization,sbid
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Origin: 你的域名

현재 게시물 삭제 등은 모두 정상적으로 작동 할 수 있습니다.
그러나 다른 문제가 발생하면 nginx는 401을 반환 할 때 Access-Control-Allow-Origin 및 기타 정보를 손실하여 401 (https://github.com/github/fetch/issues/201)에서 응답 상태를 가져 오지 못했습니다. # issuecomment-141777867)
솔루션, nginx는 항상 추가
구문 : | add_header 이름 값 [항상];
http, 서버, 위치 (위치에있는 경우)

server {
  listen       80;
  server_name  www.google.com;

  #charset koi8-r;
  #access_log  /var/log/nginx/host.access.log  main;

  location / {
    if ($request_method = 'OPTIONS') { 
      add_header Access-Control-Allow-Origin 'http://www.baidu.com' always;
      add_header Access-Control-Allow-Credentials 'true' always; 
      add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS' always;
      add_header Access-Control-Allow-Headers 'Keep-Alive,User-Agent,Cache-Control,Content-Type,Authorization,sbid' always;    
      return 200; 
    }

    root   /home/wwwroot/php;
    index  index.php index.html index.htm;
    try_files $uri $uri/ /index.php?$args;
  }

  location ~ \.php$ {
    add_header Access-Control-Allow-Origin 'http://www.baidu.com' always;
    add_header Access-Control-Allow-Credentials 'true' always; 
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS' always;
    add_header Access-Control-Allow-Headers 'Keep-Alive,User-Agent,Cache-Control,Content-Type,Authorization,sbid' always;  
    root /home/wwwroot/php/;
    fastcgi_pass 127.0.0.1:9000;
    fastcgi_index index.php;
    fastcgi_param SCRIPT_FILENAME           $document_root$fastcgi_script_name;
    include fastcgi_params;
  }  
}

server {
  listen       80;
  server_name  www.baidu.com;

  #charset koi8-r;
  #access_log  /var/log/nginx/host.access.log  main;

  location / {
    root   /home/wwwroot/view;
    try_files $uri $uri/ /index.html;
  }  
}