2017-12-05 32 views
1

저는 REST API를 통해 이미지를 Wordpress에 업로드하는 데 문제가 있습니다. 지금 당장 상황이 있습니다 :WordPress Rest API 이미지 업로드 CORS 문제

  • 현재 컴퓨터에서 로컬로 개발 중이므로 MAMP를 사용하여 Wordpress를 실행하고 있습니다.
  • 내 응용 프로그램의 프런트 엔드에서 React를 사용 중이며 Wordpress REST API를 백엔드로 사용하고 있습니다. 그래서 나는 지금 무표정한 CMS 앱을 운영하고있다.
  • 우편 배달부를 사용하여 Wordpress에 이미지를 업로드 할 수 있습니다. Wordpress 관리자 패널로 가서 대시 보드에 실제로 이미지를 볼 수 있습니다. 나는 인증도 받았고, 내 애플 리케이션에 로그인되어 있고 JWT 토큰이 우편 배달부와 함께 전달되었다.

문제점 : 나는 우체부에서 오전과 동일한 POST 요청을 만들기 위해 Axios의를 사용하고 있지만 CORS 오류의 일종을 얻고 나는 안전하게 워드 프레스 백엔드에 CORS를 사용하도록 설정하는 방법을 잘 모르겠어요 .

여기 내 브라우저의 콘솔에서 정확한 오류의 : 요청 헤더 필드 캐시 제어 프리 플라이트 응답 액세스 제어 - 허용 - 헤더에 의해 허용되지 않습니다

http://localhost:8888/wp-json/wp/v2/media을로드하지 못했습니다.

내 AJAX 호출 (이에 Axios의 반응 및 사용)

onFileChange(event) { 
 
    let files = event.target.files || event.dataTransfer.files; 
 
    if (!files.length) { 
 
     console.log('no files'); 
 
    } else { 
 
     axios.post('http://localhost:8888/wp-json/wp/v2/media', files, { 
 
     headers: { 
 
      'content-type': 'image/png', 
 
      'content-disposition': 'attachment; filename=testImageNum2.png', 
 
      'Authorization': `Bearer ${localStorage.getItem('token')}`, 
 
      'cache-control': 'no-cache', 
 
     } 
 
     }) 
 
    } 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <Header /> 
 
     <h2>Upload A File Here:</h2> 
 
     <input id="file_selector" type="file" name="file" onChange={this.onFileChange} /> 
 
     </div> 
 
    ) 
 
    }

하면 WP이 주제에 너무 많은 정보가있는 것 같지 않습니다 현재 REST API. 누구든지이 주제에 대해 밝힐 수 있다면 매우 감사 할 것입니다.

답변

0

클라이언트 (axios)가 "cache-control"헤더 ('cache-control': 'no-cache',)를 가지고 있지만 cache-control이 허용 된 헤더 목록 인 Apache의 Access-Control-Allow-Headers 목록에없는 요청을 보내는 중입니다. 해당 목록에 "캐시 제어"를 추가하거나 액시스에서 비활성화하십시오.

+0

응답 해 주셔서 감사합니다. 오류 처리가 모두 발생했기 때문에 콘텐츠 처리 및 캐시 제어를 모두 사용하지 않도록 설정했습니다. 하지만 이제 403 (금지됨) 오류가 발생합니다. Apache의 Access-Control-Allow-Headers 목록에 "cache-control"과 "content-disposition"을 추가해야한다고 생각합니다. 내 자신을 알아 내려고 노력할 것입니다. 그러나 만약 당신이 어떤 추천 자원을 가지고 있다면 정말로 감사 할 것입니다 :) – Calvin