fetch api에서 CORS 사용

fetch api에서 CORS 사용

이 질문에는 이미 답변이 있습니다.

'Access-Control-Allow-Origin' 헤더는 어떻게 작동합니까? (답변 19개)

닫힘4년 전에요.

계속할 수 없는 다음 오류 메시지가 나타납니다.

https://site/data.json을 로드하지 못했습니다. 비행 전 요청에 대한 응답이 액세스 제어 검사를 통과하지 못했습니다.요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다.따라서 오리진 'http://localhost:8080'은 액세스가 허용되지 않습니다.불투명한 응답이 요구에 적합한 경우 요청 모드를 'no-cors'로 설정하여 CORS가 비활성화된 상태로 리소스를 가져옵니다.localhost/:1 미취득(확실히)TypeError: 가져오지 못했습니다.

이 기능을 활성화하려고 합니다.CORS리액트 js 파일에 저장되었지만 예상한 결과를 얻을 수 없었습니다.크롬 익스텐션을 설치했는데 작동해요.그러나 프로덕션 사이트에서 사용하려면 코드 내에서 활성화해야 합니다.코드를 적절히 배열하여 이 기능을 활성화하려면CORS.

fetch(URL, {
  mode: 'cors',
  headers: {
    'Access-Control-Allow-Origin':'*'
  }
})
  .then(response => response.json())
  .then(data => {

브라우저의 클라이언트 측에는 크로스 도메인 보안이 있어 서버가 도메인에서 데이터를 가져올 수 있는지 확인합니다.한다면Access-Control-Allow-Origin응답 헤더에서는 사용할 수 없습니다.브라우저는 JavaScript 코드에서 응답을 사용할 수 없으며 네트워크 수준에서 예외를 발생시킵니다.를 설정할 필요가 있습니다.cors서버 측에 있습니다.

다음을 사용하여 요청을 가져올 수 있습니다.mode: 'cors'이 경우 브라우저는 크로스 도메인에 대한 실행을 실행하지 않지만 브라우저는 javascript 함수로 응답하지 않습니다.

따라서 두 가지 조건 모두에서cors또는 커스텀 프록시 서버를 사용해야 합니다.

언급URL : https://stackoverflow.com/questions/51017702/enable-cors-in-fetch-api