HTTP 요청 헤더 with componentDidMount

Question

나는 React에 매우 익숙하며 연습하기 위해 Yelp API에서 정보를 가져 오는 응용 프로그램을 작성하려고하지만 응답을 얻는데 어려움이 있습니다. Yelp Fusion v3에는 'access_token'이 필요합니다 (Postman에서 성공적으로 응답했습니다). 제 신청서에서이 요청을하려면 Axios를 사용하고 있습니다. 이 요청을 componentDidMount() 내에서 응답으로 받아 들일 때

XMLHttpRequest는 https://api.yelp.com/v3/businesses/search?term=sushi&location=Boston을로드 할 수 없습니다. 프리 플라이트 요청에 대한 응답이 액세스 제어 검사를 통과하지 못합니다. 'Access-Control-Allow-Origin'헤더가 요청 된 자원에 없습니다. 따라서 원점 'http://localhost:8080'은 액세스 할 수 없습니다. (응용 프로그램의 일부가 아닌) 별도의 파일에 동일한 코드를 실행할 때 내가 잘못 access_token과 및 매개 변수를 지정하고 것처럼 보일 수 있지만 응답은 HTTP 상태 코드 (500)

있었다, 나는 JSON 응답을 얻을 내 앱에서 찾고있는

은 여기 내 componentDidMount()이다 : 나는뿐만 아니라 옐프 노드 모듈을 시도했습니다

componentDidMount: function() { 
    axios.get('https://api.yelp.com/v3/businesses/search?term=Sushi&location=Boston',{ 
     headers: { 
      Authorization: `Bearer ${token}` 
     } 
    }) 
    .then(function(res){ 
     console.log(res) 
    }) 
    .catch(function(err){ 
     console.log(err) 
    }) 
}, 

,하지만 난 운이없는입니다. 도와주세요!

Answer 1

이 오류는 Cross-Origin 오류입니다.

웹 브라우저에는 AJAX 요청이 있습니다. 즉, 동일한 출처로 보내거나 제 3 자의 승인을 받아야합니다. 그렇지 않으면 차단됩니다. 당신은 Yelp에 대한 통제권이 없으므로 해결 방법을 제안합니다. 사용 가능한

는

• 당신은 JSONP 같은 것을 사용하는 해결 방법. 이 방법은 기본적으로 <script> 태그에서 요청을 만드는 것으로 구성됩니다. 서버는 Javascript 스크립트 내에서 응답을 래핑하고 페이지에로드됩니다. (https://en.wikipedia.org/wiki/JSONP). 해당 해결 방법이 작동하려면 서버에서이 형식을 제공해야합니다.
• 역방향 프록시를 사용합니다. NodeJS를 하나의 역할을하도록 설정할 수 있습니다. 이 설정에서는 옐프 서버로 방향을 바꿀 원산지에 옐프 요청을 할 것입니다. 이는 노드 프록시가 브라우저와 동일한 제한 사항을 가지고 있지 않기 때문에 작동합니다. (예 : https://github.com/nodejitsu/node-http-proxy)

이 문제를 해결할 수있는 다른 방법이 있지만 널리 사용되는 방법입니다.

희망이 도움이됩니다.