运行 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 后端进行更改。
我试过以下方法:
- 安装
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);
});
任何帮助将不胜感激。谢谢!
一个快速修复可能是将 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请求,现在完美运行了。
我开发了一个 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);
});
任何帮助将不胜感激。谢谢!
一个快速修复可能是将 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请求,现在完美运行了。