React 구성 요소의 Behaviour API에서 데이터로드

해당 API를 통해 Behavior 프로젝트 데이터를로드하려고합니다. 로컬 호스트 이건 찌르 든, 다음 오류가 발생합니다. -React 구성 요소의 Behaviour API에서 데이터로드

가져 오기 API에서 XXX을 (를)로드 할 수 없습니다. 프리 플라이트 요청에 대한 응답이 액세스 제어 검사를 통과하지 못합니다. 'Access-Control-Allow-Origin'헤더가 요청 된 자원에 없습니다. 따라서 원점 'http://localhost:5000'은 액세스 할 수 없습니다. 불투명 한 응답이 사용자의 요구를 충족 시키면 요청 모드를 'no-cors'로 설정하여 CORS가 사용 불가능한 상태에서 자원을 페치하십시오.

이 문제를 해결할 방법이 확실하지 않습니다. 아래의 포트폴리오 구성 요소에서 내 코드 -

getPortfolio =() => { 

const USER_ID = `XXX`, 
     PROJECT_ID = `XXX`, 
     API_KEY = `XXX`; 

const BEHANCE_URL = `https://api.behance.net/v2/users/${USER_ID}/projects?client_id=${API_KEY}`; 
console.log(BEHANCE_URL); 

fetch(BEHANCE_URL, { 
    method: 'get', 
    dataType: 'jsonp', 
    headers: { 
     'Accept': 'application/json', 
     'Content-Type': 'application/json' 
    } 
}).then((response) => { 
    return response.json(); 
}).then((responseData) => { 
    return responseData; 
}).catch((err) => { 
    return err; 
}); 

}

업데이트 : 대신 jQuery를 아약스의 작품을 사용하여 가져옵니다. -

$.ajax({ 
    url: BEHANCE_URL, 
    type: "get", 
    data: {projects: {}}, 
    dataType: "jsonp" 
}).done((response) => { 
    this.setState({ 
    portfolioData: response['projects'] 
    }); 
}).fail((error) => { 
    console.log("Ajax request fails") 
    console.log(error); 
});

출처

2017-05-02 Yasir

이것은 반응이 적고 행동이 더 많습니다. 당신이 얻고있는 것은 아마도 당신이 알아 낸대로 CORS error입니다. 짧은 설명은 CORS가 웹 사이트가 브라우저의 다른 웹 사이트를 두 번째 웹 사이트로 표시하도록 요청할 수 없도록 브라우저에 삽입되는 보안 조치입니다. 일부 피싱 공격으로부터 보호하기위한 안전 조치입니다.

CORS는 서버 (이 경우 Behance)에 의해 사용 중지 될 수 있지만 정당한 이유가없는 것으로 결정됩니다.

Behavior를 사용하면 서버에서 요청하려는 요청을 대신 처리 할 수 있습니다. 일단 그렇게하면 서버에서 React 응용 프로그램으로 정보를 가져와야합니다. 그러면 잘 될 것입니다!

출처

2017-05-02 19:53:58

whats odd는 jQuery를 도입하고 $ .ajax를 사용하여 데이터를 가져옵니다. – Yasir

Fetch 대신 jQuery를 사용한다는 의미인가요? 그것은 참으로 이상합니다. –

참으로,이 작품 - $ 아약스 ({ URL : BEHANCE_URL, 유형 : "GET", 데이터 : {프로젝트 : {}} dataType와 "JSONP" 을}) 완료 ((응답.) =>. this.setState {({ portfolioData : 응답 [ '프로젝트'] }) }는() (오차) => { CONSOLE.LOG ("Ajax 요청 실패") CONSOLE.LOG 실패 (오류); }); – Yasir

React 구성 요소의 Behaviour API에서 데이터로드

답변

관련 문제