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

Question

I have developed an Ionic React app, running on top of Capacitor . In browser (ionic serve), the app runs perfectly. When I run the app on Android emulator and I try to log in my App, a CORS error is shown. How can I solve this error, taking in consideration that I cannot change the API server back end. In my app I'm contacting an external API using different methods such as GET, POST and PUT.

an example of a POST Request with axios for browser:

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

** I cannot make changed in API back-end.

I have tried the following:

1. install cordova-plugin-advanced-http , according to https://ionicframework.com/docs/native/http/ : It requests to install @angular/core , but I'm working with React. Anyway, even after installing it, I cannot run the app successfully on Android, cannot login.

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

2. install @capacitor-community/http , according to https://github.com/capacitor-community/http : in this case, when I import 'import com.getcapacitor.plugin.http.Http' it shows an error: '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);
    });

Any help would be really appreciated. Thank you!

Answer 1

A fast fix could be to set the header of the post request to something which doesn't trigger a cors request, eg "Content-Type": "application/x-www-form-urlencoded" .

Those requests are called "simple requests" and you can read up on them here .

Answer 2

Sometimes the owner of the server add Origins in allowed origins so that only those origins can call the APIs, probably your website/local URL doesn't matches with the allowed origins,

Answer 3

For anyone interested, I found the solution. In this doc https://github.com/capacitor-community/http , configuration for Android is missing .

1- So, import and add http plugin in android\app\src\main\java\MainActivity.java

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- Sync gradle files in Android Studio:

File --> Sync Project with Gradle Files

I wrote the http request according to my needs and now it works perfectly.