So veröffentlichen Sie Daten von der ionischen App in Google Cloud Function

Question

Ich versuche, Daten von einer ionischen App an Google Cloud Functions zu senden, erhalte jedoch ständig die folgende Fehlermeldung:

Der Zugriff auf XMLHttpRequest unter „https://xxxxxxxxxxxxxxx.cloudfunctions.net/upload_data“ vom Ursprung „http://localhost:8100“ wurde durch die CORS-Richtlinie blockiert: Der Zugriff verbietet den Inhaltstyp des Anforderungsheaderfelds – in der Preflight-Antwortsteuerung. Allow-Header.

Auch wenn der Anforderungsheader entfernt wird, wird der gleiche Fehler angezeigt. Wir würden uns über jede Hilfe sehr freuen, vielen Dank.

Mein Typoskript-Code:

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);   
        });

Python-Cloud-Funktion:

def hello_world(request):
    """Responds to any HTTP request.
    Args:
        request (flask.Request): HTTP request object.
    Returns:
        The response text or any set of values that can be turned into a
        Response object using
        `make_response <http://flask.pocoo.org/docs/1.0/api/#flask.Flask.make_response>`.
    """
    if request.method == 'OPTIONS':
        headers={'Access-Control-Allow-Origin':'*',
                'Access-Control-Allow-Methods':'GET',
                'Access-Control-Allow-Headrs':'Content-Type',
                'Access-Control-Max-Age':'3600'
        }
        return ('',204,headers)
    headers={'Access-Control-Allow-Origin':'*'}
    
    request_json = request.get_json(silent=True)
    request_args = request.args
    
    if request_json and 'testbody' in request_json:
        testname = request_json['testbody']
    elif request_args and 'testbody' in request_args:
        testname = request_args['testbody']
    else:
        testname = 'Nothing sent'
    return (jsonify(testname),200,headers)

Answer 1

CORS相关配置需要在服务器端代码中完成。从您的问题中，我看到您在 Python 中使用 Flask 框架。所以需要在Flask中配置CORS如下：

通过运行安装flask-cors -

pip install -U flask-cors

考虑以下示例端点代码：

from flask import Flask
from flask_cors import CORS, cross_origin
app = Flask(__name__)
cors = CORS(app)
app.config['CORS_HEADERS'] = 'Content-Type'

@app.route("/")
@cross_origin()
def helloWorld():
  return "Hello, cross-origin-world!"

更新

在Production环境中，请禁止禁止使用Access-Control-Allow-Origin':'*'。相反，您应该 whitelist 您的域名。阅读有关此内容的更多信息此处和此处。

此外，如果您将 Ionic 与 Capacitor 一起使用，我建议使用 Http 插件。如果可能，您还可以编写自己的 自定义插件 来使用底层操作系统 平台特定的 API 实现网络调用 natively ，因为这可以防止发生任何 CORS 相关问题。

参考链接：

Flask CORS 配置

允许 Flask 端点使用 CORS