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

Question

我开发了一个 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 后端进行更改。

我试过以下方法：

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

安装 @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);
    });

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

Answer 1

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

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

Answer 2

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

Answer 3

对于任何感兴趣的人，我找到了解决方案。在此文档中，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请求，现在完美运行了。

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

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

android

reactjs

ionic-framework

capacitor

capacitor-plugin