运行 React 应用程序在 Android 模拟器上时如何修复 CORS 错误?

How to fix CORS error when running the React app on Android emulator?

我开发了一个 Ionic React 应用程序,运行ning 在 Capacitor 之上。在浏览器(离子服务)中,应用程序 运行 非常完美。 当我 运行 Android emulator 上的应用程序并尝试登录我的应用程序时,显示 CORS 错误 。 考虑到我无法更改 API 服务器后端,我该如何解决此错误。 在我的应用程序中,我使用 GET、POST 和 PUT 等不同方法联系外部 API。

POST 浏览器 axios 请求示例:

    const doLogin = (e: any) => {
    e.preventDefault();

    const data = {

      cardNr: cardNumber,
      name: name,
    };

    axios
    .post("/login", data)
    .then((response) => {
    //do sth
    }
    return response.data;
    })
    .catch((error) => {
    console.log(error);
    });

** 我无法在 API 后端进行更改。

我试过以下方法:

  1. 安装 cordova-plugin-advanced-http,根据 https://ionicframework.com/docs/native/http/ :它要求安装 @angular/core,但我正在使用 React。无论如何,即使安装了它,我也无法在 Android 上成功 运行 应用程序,无法登录。
import { HTTP } from '@ionic-native/http/ngx';

    const doLogin = (e: any) => {
    e.preventDefault();

    const data = {

      cardNr: cardNumber,
      name: name,
    };

var http = new HTTP();

    http
    .post("https://xx/login", data, {})
    .then((response) => {
    //do sth
    }
    return response.data;
    })
    .catch((error) => {
    console.log(error);
    });
  1. 安装 @capacitor-community/http,根据 https://github.com/capacitor-community/http :在这种情况下,当我导入 ‘import com.getcapacitor.plugin.http.Http’ 时显示错误:‘Cannot resolve symbol http’.
import { Plugins } from "@capacitor/core";
 const doLogin = (e: any) => {
    e.preventDefault();

    const data = {

      cardNr: cardNumber,
      name: name,
    };

const { Http } = Plugins;
    await Http.request({
      method: "POST",
      url: "https://xx/login",
      data: data,
    })
    .then((response) => {
    //do sth
    }
    return response.data;
    })
    .catch((error) => {
    console.log(error);
    });

任何帮助将不胜感激。谢谢!

一个快速修复可能是将 post 请求的 header 设置为不会触发 cors 请求的内容,例如"Content-Type": "application/x-www-form-urlencoded".

这些请求称为“简单请求”,您可以阅读它们 here

有时服务器的所有者在允许的来源中添加来源,以便只有那些来源可以调用 API,可能是您的 website/local URL 与允许的来源不匹配,

对于任何感兴趣的人,我找到了解决方案。在此文档中,https://github.com/capacitor-community/http缺少 Android 的配置

1- 因此,在 android\app\src\main\java\MainActivity.java

中导入并添加 http 插件
package com.myapp.com;

import android.os.Bundle;

import com.getcapacitor.BridgeActivity;
import com.getcapacitor.Plugin;

import java.util.ArrayList;
import com.getcapacitor.plugin.http.Http; //added

public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Initializes the Bridge
    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
      // Additional plugins you've installed go here
      // Ex: add(TotallyAwesomePlugin.class);
      add(Http.class); //added
    }});
  }
}

2- 在 Android Studio 中同步 gradle 个文件:

File --> Sync Project with Gradle Files

我根据需要写了http请求,现在完美运行了。