CORS问题,将工作web应用程序打造成Android的本机Ionic应用程序
我一直在尝试设置这个爱奥尼亚CLI代理服务器,但这是从2015年开始的,我不知道如何在10年内实现它 因此,当我使用命令运行我的应用程序时:CORS问题,将工作web应用程序打造成Android的本机Ionic应用程序,android,angular,ionic-framework,cors,capacitor,Android,Angular,Ionic Framework,Cors,Capacitor,我一直在尝试设置这个爱奥尼亚CLI代理服务器,但这是从2015年开始的,我不知道如何在10年内实现它 因此,当我使用命令运行我的应用程序时: ionic capacitor run android --project=myApp -c=production 我在Android Studio中遇到以下错误: E/Capacitor/Console: File: http://localhost/login - Line 0 - Msg: Access to XMLHttpRequest at '
ionic capacitor run android --project=myApp -c=production
我在Android Studio中遇到以下错误:
E/Capacitor/Console: File: http://localhost/login - Line 0 - Msg: Access to XMLHttpRequest at 'https://remoteServer.com/api/v1/oauth/v2/token' from origin 'http://localhost' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' head
这是我的capactor.config.json文件:
{
"appId": "io.ionic.starter",
"appName": "myApp",
"bundledWebRuntime": false,
"npmClient": "npm",
"webDir": "www",
"plugins": {
"SplashScreen": {
"launchShowDuration": 0
}
},
"cordova": {},
"linuxAndroidStudioPath": "/opt/android-studio/bin/studio.sh"
}
{
"name": "myApp",
"integrations": {
"capacitor": {}
},
"type": "angular",
"proxies": [
{
"path": "/api",
"proxyUrl": "https://remoteServer.com/api"
}
]
}
这是我的ionic.config.json文件:
{
"appId": "io.ionic.starter",
"appName": "myApp",
"bundledWebRuntime": false,
"npmClient": "npm",
"webDir": "www",
"plugins": {
"SplashScreen": {
"launchShowDuration": 0
}
},
"cordova": {},
"linuxAndroidStudioPath": "/opt/android-studio/bin/studio.sh"
}
{
"name": "myApp",
"integrations": {
"capacitor": {}
},
"type": "angular",
"proxies": [
{
"path": "/api",
"proxyUrl": "https://remoteServer.com/api"
}
]
}
离子信息
Ionic:
Ionic CLI : 6.10.1 (/home/user/.nvm/versions/node/v12.18.3/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.3.1
@angular-devkit/build-angular : 0.1000.5
@angular-devkit/schematics : 10.0.5
@angular/cli : 10.0.5
@ionic/angular-toolkit : 2.3.3
Capacitor:
Capacitor CLI : 2.4.0
@capacitor/core : 2.4.0
Utility:
cordova-res : not installed
native-run : not installed
System:
NodeJS : v12.18.3 (/home/user/.nvm/versions/node/v12.18.3/bin/node)
npm : 6.14.6
OS : Linux 5.4
有没有办法解决这个问题?我已经找了很久了
编辑: 所以我按照Angular的说明和这篇解释的文章,但我遇到了新的问题 TS使用文章中的代码抱怨这一行:
headers:nativeHttpResponse.headers
(property) headers?: HttpHeaders
Type '{ [key: string]: string; }' is missing the following properties from type 'HttpHeaders': headers, normalizedNames, lazyInit, lazyUpdate, and 12 more.ts(2740)
http.d.ts(3406, 9): The expected type comes from property 'headers' which is declared here on type '{ body?: any; headers?: HttpHeaders; status?: number; statusText?: string; url?: string; }'
以下是整个本机http.interceptor.ts:
import { Injectable } from "@angular/core";
import {
HttpInterceptor,
HttpRequest,
HttpHandler,
HttpEvent,
HttpResponse,
} from "@angular/common/http";
import { Observable, from } from "rxjs";
import { Platform } from "@ionic/angular";
import { HTTP } from "@ionic-native/http/ngx";
type HttpMethod =
| "get"
| "post"
| "put"
| "patch"
| "head"
| "delete"
| "upload"
| "download";
@Injectable()
export class NativeHttpInterceptor implements HttpInterceptor {
constructor(private nativeHttp: HTTP, private platform: Platform) {}
public intercept(
request: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
if (!this.platform.is("cordova")) {
return next.handle(request);
}
return from(this.handleNativeRequest(request));
}
private async handleNativeRequest(
request: HttpRequest<any>
): Promise<HttpResponse<any>> {
const headerKeys = request.headers.keys();
const headers = {};
headerKeys.forEach((key) => {
headers[key] = request.headers.get(key);
});
try {
await this.platform.ready();
const method = <HttpMethod>request.method.toLowerCase();
// console.log(‘— Request url’);
// console.log(request.url)
// console.log(‘— Request body’);
// console.log(request.body);
const nativeHttpResponse = await this.nativeHttp.sendRequest(
request.url,
{
method: method,
data: request.body,
headers: headers,
serializer: "json",
}
);
let body;
try {
body = JSON.parse(nativeHttpResponse.data);
} catch (error) {
body = { response: nativeHttpResponse.data };
}
const response = new HttpResponse({
body: body,
status: nativeHttpResponse.status,
headers: nativeHttpResponse.headers, <--------
url: nativeHttpResponse.url,
});
// console.log(‘— Response success’)
// console.log(response);
return Promise.resolve(response);
} catch (error) {
if (!error.status) {
return Promise.reject(error);
}
const response = new HttpResponse({
body: JSON.parse(error.error),
status: error.status,
headers: error.headers,
url: error.url,
});
return Promise.reject(response);
}
}
}
Andd下面是我的core.module.ts
(我想在这里使用拦截器)的样子:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IonicModule } from '@ionic/angular';
import { HTTP } from '@ionic-native/http/ngx';
import { CoreModule } from './core/core.module';
import { SharedModule } from './shared/shared.module';
import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './shared/page-not-found/page-not-found.component';
import { appRoutes } from './app.routes';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
SharedModule,
CoreModule,
RouterModule.forRoot(
appRoutes
),
IonicModule.forRoot()
],
providers: [HTTP],
declarations: [
AppComponent,
PageNotFoundComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { HTTP_INTERCEPTORS, HttpClientModule } from "@angular/common/http";
import { NativeHttpInterceptor } from "./service/native-http.interceptor";
import { AuthService } from "./service/auth.service";
import { ApiService } from "./service/api.service";
import { AuthGuardService } from "./service/auth-guard.service";
import { AuthInterceptor } from "./service/auth-interceptor";
import { WindowRef } from "./service/window-ref-service";
@NgModule({
imports: [CommonModule, HttpClientModule],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: NativeHttpInterceptor,
multi: true,
},
AuthService,
ApiService,
AuthGuardService,
WindowRef,
{
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: true,
},
],
})
export class CoreModule {}
代理配置仅适用于本机版本的
ionic-serve
或livereload
如果您无法更改BE中的任何选项,那么最简单的方法是为HTTP请求使用本机插件,该插件将发送不带原始标头的请求(因为它不是从浏览器发送的)
您可以从中使用Ionic本机包装。您有权访问服务器以应用某些配置吗?以下是针对CORS的更新的Ionic文章:@yazantahhan no,谢谢你的链接,我没有权限在上面更改任何内容。你能把抱怨标题的代码块放进去吗?@yazantahhan TS error added+native-http.interceptor.TS&app.module.TS&core.module.TS你知道我是否可以用这个http插件相对容易地替换我的HttpClient吗?我在api.service中有数百行代码需要修改……您可以使用一个拦截器来完成这项工作。创建一个将捕获所有请求和响应的插件,然后您将使用该插件而不是HttpClient发送请求。这将需要一些工作,但这是最好的方法,所以你不必改变所有其他地方。您所有的逻辑都在一个地方,您可以检查一下:是否有一个具有此实现的示例项目?我无法让它工作…TS正在抱怨此行的“headers”类型:headers:nativeHttpResponse.headers