자바 스크립트 API 요청 CORS 오류

잘못된 용어를 사용하면 매우 신났습니다. https://api.trello.com/1/cards/5a42e19364345a7d84ba3f5f/members로드하지 못했습니다자바 스크립트 API 요청 CORS 오류

: 나는 Trello API를 사용하여 데이터를 가져하지만 크롬 콘솔에서 다음과 같은 오류 받기 위해 애 쓰고의 값 '액세스 제어 - 허용 - 원산지'는 응답 헤더는 안됩니다을 요청의 자격 증명 모드가 '포함'인 경우 와일드 카드 '*' 따라서 원점 'http://localhost:8080'은 액세스 할 수 없습니다. XMLHttpRequest에 의해 시작된 요청의 자격 증명 모드는 withCredentials 특성에 의해 제어됩니다.

일부 연구를 수행 한 후 이것이 CORS 문제임을 발견했습니다. 파이썬에서 Google App Engine을 사용하고 있습니다. 이 오류는 해결할 수 있습니까, 아니면 API 버그입니까? 나는이 API를 아무 문제없이 사용하여 POST 요청을 처리했다. CORS에 관한 많은 정보를 읽었지만 문제에 대한 해결책을 찾지 못했습니다. 당신이 두 개의 결합하려고하는 것처럼

var authenticationSuccess = function() { 
    console.log('Successful authentication'); 
}; 

var authenticationFailure = function() { 
    console.log('Failed authentication'); 
}; 

window.Trello.authorize({ 
    type: 'popup', 
    name: 'Work Requests App', 
    scope: { 
    read: 'true', 
    write: 'true' }, 
    expiration: 'never', 
    success: authenticationSuccess, 
    error: authenticationFailure 
}); 

var data = JSON.stringify(false); 

var xhr = new XMLHttpRequest(); 
xhr.withCredentials = true; 

xhr.addEventListener("readystatechange", function() { 
    if (this.readyState === this.DONE) { 
    console.log(this.responseText); 
    } 
}); 

xhr.open("GET", "https://api.trello.com/1/cards/5a42e1936434a7d84ba3f5f/members"); 

xhr.send(data);

출처

2017-12-27 user9109814

왜 'withCredentials = true'를 사용하고 있습니까? [그것이하는 일]을 알고 있습니까 (https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials)? – Phil

예. false로 설정하면 인증되지 않습니다. 또한 왜이 질문을 복제본으로 표시 했습니까? 나는 Java/Spring/Angular/SockJS를 사용하지 않고 있는데, 그 중 어떤 대답이 나를 도와 줄 수 있습니까? 답변이 없으며 문제는 Chrome의 영업일에만 발생합니다. – user9109814

다시 열었습니다. 전혀 다르다는 것을 깨닫지 못했습니다 – Phil

것 같습니다 : 여기

은 단지/내가 잘못 확실하지 해요 Trello의 API에서 붙여 복사되면, GET 요청에 대한 내 자바 스크립트 코드 Trello API로 작업하는 다른 방법 - client.js 사용 및 직접 HTTP 요청 만들기.

Trello API로 작업 할 때 여러 가지 도우미 기능을 제공하므로 client.js 만 사용하는 것이 좋습니다. 예를 들어 .authorize() 메서드는 API 키의 토큰 생성 과정을 안내하고 로컬로 저장합니다.

<html> 
    <script 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
    crossorigin="anonymous"></script> 
    <script src="https://trello.com/1/client.js?key=XXXXXXXXX"></script> 
    <script> 

    var requestSuccess = function(response) { 
     console.log(JSON.stringify(response, null, 2)); 
    } 

    var authenticationSuccess = function() { 
     console.log('Successful authentication'); 
     // Now that you are authenticated, you can start 
     // making requests to the API 
     window.Trello.rest("GET", "cards/5a42e1936434a7d84ba3f5f/members", requestSuccess); 
    }; 

    var authenticationFailure = function() { 
     console.log('Failed authentication'); 
    }; 

    window.Trello.authorize({ 
     type: 'popup', 
     name: 'Work Requests App', 
     scope: { 
     read: 'true', 
     write: 'true' }, 
     expiration: 'never', 
     success: authenticationSuccess, 
     error: authenticationFailure 
    }); 
    </script> 
</html>

당신은 당신의 API 포함해야합니다 (trello.com/app-key 동안 방문에서 얻은 Trello에 로그인)의 모양은 단지 client.js 코드를 사용하여 예를 들어 당신이이 카드의 데이터를 얻기 위해 요청을 만들려면 스크립트에 client.js을 포함하면 위의 XXXXXXXXX을 API 키로 바꿉니다. 오히려 Trello의 API에 직접 HTTP 요청을 할 싶다면

, 당신은 (당신이 당신의 API 키를 검색 같은 페이지에서 수행 할 수 있습니다) 토큰을 생성해야하고 코드는 다음과 같이 표시됩니다

<html> 
    <script> 
    var xhr = new XMLHttpRequest(); 

    xhr.addEventListener("readystatechange", function() { 
     if (this.readyState === this.DONE) { 
     console.log(this.responseText); 
     } 
    }); 

    var yourToken = "XXXXXXXXXX"; 
    var yourKey = "XXXXXXXXXX"; 

    xhr.open("GET", "https://api.trello.com/1/cards/5a42e1936434a7d84ba3f5f/members?key=" + yourKey + "&token=" + yourToken); 

    xhr.send(); 
    </script> 
</html>

다시 말해 API 키와 토큰을 추가해야합니다.

출처

2018-01-17 19:21:20

자바 스크립트 API 요청 CORS 오류

답변

관련 문제