서버에서 유효한 응답을 얻지 만 Ajax CORS가 항상 실패 함

API 게이트웨이에 AWS 람다 기능이 연결되어 있습니다. 나는 하루 종일 CORS를 설정하려고 노력했지만, 여기서 무슨 일이 일어나고 있는지 알 수 없습니다. API 게이트웨이에서 다음과 같이 옵션 방법에 대한서버에서 유효한 응답을 얻지 만 Ajax CORS가 항상 실패 함

 var endPoint = 'https://776v8jadw0.execute-api.us-east-1.amazonaws.com/sandbox/helpwithprogramming/contact'; 
     var payload = {message: 'Hello there'}; 
     var headers = new Headers(); 
     headers.append('Access-Control-Allow-Origin', '*'); 
     var options = { 
      method: 'POST', 
      headers: headers, 
      mode: 'cors', 
      cache: 'default', 
      body: JSON.stringify(payload) 
     }; 

     fetch(endPoint, options) 
      .then(res => { 
      console.log('ok', res); 
     }) 
     .catch(err => { 
      console.log('error', err); 
     });

내 응답 헤더는 다음과 같습니다 :

이

는 클라이언트의 요청입니다

access-control-allow-headers:Access-Control-Allow-Origin,Content-Type,Authorization,X-Amz-Date,X-Api-Key,X-Amz-Security-Token 
access-control-allow-methods:DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT 
access-control-allow-origin:* 
content-length:0 
content-type:application/json 
date:Mon, 11 Dec 2017 05:33:59 GMT 
status:200

그리고 나는 POST API 게이트웨이에서 다음과 같은 응답을 얻을 실행됩니다 :

{message: "Hello from Lambda"}

그러나 실제로 가져 오기 호출이 실패하고 t

TypeError: Failed to fetch

을 그리고 크롬은 콘솔에서이 메시지를 표시합니다 : 그는 다음과 같은 오류와 함께 블록을 잡을 API 게이트웨이 AWS 콘솔 탐색에서

Failed to load https://776v8jadw0.execute-api.us-east-1.amazonaws.com/sandbox/helpwithprogramming/contact : No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:63342 ' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

출처

2017-12-11 Tony

헤더를 추가하기 전에 브라우저가 캐싱 한 캐시 응답을받지 못하도록 강제로 다시로드 해보십시오. 또는 다른 브라우저에서 시도하십시오. 또한 프론트 엔드 코드에서'headers.append ('Access-Control-Allow-Origin', '*'); 부분을 제거하십시오. 요청에 헤더를 보내지 않으려는 것입니다 : 서버에 대한 응답 헤더 돌려 보내. – sideshowbarker

나는 그것을 풀 수 있었다. api 게이트웨이의 OPTIONS 및 POST 응답에 ('Access-Control-Allow-Origin', '*')을 추가해야했습니다. – Tony

배포 된 을 선택하십시오.
예 : 에 대해 HTTP 메서드를 선택하고을 에 저장하고을 클릭하고 동작을 클릭합니다.
선택 는 자원 작업에 CORS을 활성화하고 를 추가 '*' 에 대한 액세스 제어 - 허용 - 원산지 및 CORS 수 있습니다.

출처

2017-12-13 05:50:00

서버에서 유효한 응답을 얻지 만 Ajax CORS가 항상 실패 함

답변

관련 문제