ionic 앱의 데이터를 Google Cloud Function에 게시하는 방법

Question

ionic 앱에서 Google Cloud Functions로 데이터를 보내려고 하는데 다음 오류가 계속 발생합니다.

원본 'http://localhost:8100'의 'https://xxxxxxxxxxxxxxx.cloudfunctions.net/upload_data'에서 XMLHttpRequest에 대한 액세스가 CORS 정책에 의해 차단되었습니다. 액세스는 요청 헤더 필드 콘텐츠 유형을 허용하지 않습니다 - 실행 전 응답 제어- 헤더 허용.

요청 헤더를 제거해도 동일한 오류가 표시됩니다. 어떤 도움이라도 대단히 감사하겠습니다. 감사합니다.

내 타이프스크립트 코드:

으아악

파이썬 클라우드 기능:

var httpheader = new HttpHeaders();
    
    httpheader.append('Accept','application/json');
    httpheader.append('Content-Type','application/json');
  
     let data = {"testbody":"this is test data"};
      
      await this.http.post('https://xxxxxxxxxxxxxxxx.cloudfunctions.net/upload_data',data
      ,{headers:httpheader}).subscribe((resp)=>{
          console.log(resp);   
        });

Answer 1

CORS相关配置需要在服务器端代码中完成。从您的问题中，我看到您在 Python 中使用 Flask 框架。所以需要在Flask中配置CORS 내용은 다음과 같습니다.

-를 실행하여 flask-cors

를 설치하세요. 으아악

다음 엔드포인트 코드 예시를 고려하세요.

으아악

업데이트

In Production环境中，请禁止禁止使用Access-Control-Allow-Origin':'*'。相反，您应该 whitelist 귀하의 도메인 이름. 이에 대한 자세한 내용은 여기 및 여기를 참조하세요.

또한 Ionic with Capacitor를 사용하는 경우 Http 플러그인을 사용하는 것이 좋습니다. Ionic 与 Capacitor 一起使用，我建议使用 Http 插件。如果可能，您还可以编写自己的 自定义插件 来使用底层操作系统 平台特定的 API 实现网络调用 natively. 가능하다면 자체 사용자 정의 플러그인을 작성하여 기본 운영 체제의 플랫폼별 API 구현

network

호출을 기본적으로 사용할 수도 있습니다. CORS 관련 문제가 발생하는 것을 방지합니다.

참조 링크:

Flask CORS 구성

Flask 엔드포인트에서 CORS를 사용하도록 허용🎜🎜