Javascript 获得';请求的资源';尝试在Ionic 3中传递jwt令牌时出错
我正在学习Ionic 3,并且已经成功地实现了身份验证注册等。但是在身份验证过程之后,我无法将存储的令牌发送到任何受保护的页面 这就是我得到的错误 无法加载XMLHttpRequest。不 “Access Control Allow Origin”标头出现在请求的服务器上 资源。因此,不允许使用源“” 通道(索引):1个错误 这是我正在使用的JWT库 我的Ionic应用程序正在本地主机8100上运行 我的服务器端应用程序正在app.dev上运行 HttpServiceJavascript 获得';请求的资源';尝试在Ionic 3中传递jwt令牌时出错,javascript,ionic-framework,Javascript,Ionic Framework,我正在学习Ionic 3,并且已经成功地实现了身份验证注册等。但是在身份验证过程之后,我无法将存储的令牌发送到任何受保护的页面 这就是我得到的错误 无法加载XMLHttpRequest。不 “Access Control Allow Origin”标头出现在请求的服务器上 资源。因此,不允许使用源“” 通道(索引):1个错误 这是我正在使用的JWT库 我的Ionic应用程序正在本地主机8100上运行 我的服务器端应用程序正在app.dev上运行 HttpService import {Inje
import {Injectable} from '@angular/core';
import {Http, Headers} from '@angular/http';
import * as AppConfig from '../../app/app.config';
import {AuthHttp} from 'angular2-jwt';
@Injectable()
export class HttpService {
post(url, data) {
return this.authHttp.post(url,JSON.stringify(data));
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
import {Validators, FormBuilder, FormGroup} from '@angular/forms';
import { HttpService } from '../../providers/http-service/http-service';
import {Storage} from '@ionic/storage';
/**
* Generated class for the ProfiePage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-profie',
templateUrl: 'profie.html',
})
App.modulet.ts
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import {Http,HttpModule} from '@angular/http';
import {Storage} from '@ionic/storage';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { AuthServiceProvider } from '../providers/auth-service/auth-service';
import { ProfiePage } from '../pages/profie/profie';
import {AuthHttp, AuthConfig} from 'angular2-jwt';
import {IonicStorageModule} from '@ionic/storage';
import {HttpService} from '../providers/http-service/http-service';
let storage = new Storage({});
export function getAuthHttp(http) {
return new AuthHttp(new AuthConfig({
noJwtError: true,
globalHeaders: [{'Accept': 'application/json'}],
tokenGetter: (() => storage.get('token')),
}), http);
}
@NgModule({
declarations: [
MyApp,
HomePage,
ProfiePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot(),
HttpModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ProfiePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
AuthServiceProvider,
HttpService,
{
provide: AuthHttp,
useFactory: getAuthHttp,
deps: [Http]
}
]
})
export class AppModule {
}
轮廓组件
export class ProfiePage {
private formData: FormGroup;
public error: string = "";
fname: any;
lname: any;
location: any;
constructor(
public formBuilder: FormBuilder,
public httpService: HttpService,
private storage: Storage
) {
this.formData = this.formBuilder.group({
fname: ['', Validators.required],
});
}
save() {
this.httpService.post("http://myapp.dev/api/profile/", {
fname: this.fname
}).subscribe(
data => {
console.log("success")
},
error => {
console.log("error")
});
}
}
CORS错误来自后端。不是前端。这不是角度问题,而是后端问题。谢谢你的信息!最后,我把它修好了。正如@trichetriche所说,这是服务器的问题。这篇文章帮了我很大的忙!如果你不介意,请从你的帖子中删除角度标签