我正在开发一个使用HTTP GET加载JSON数据的项目。
我收到了这个错误
"CORS header ‘Access-Control-Allow-Origin’ missing)."
这是我的服务。:
import {
Injectable
} from '@angular/core';
import {
Http,
HttpModule,
Headers,
RequestOptions,
Response
} from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import {
Observable
} from 'rxjs/Rx';
import 'rxjs/Rx'; //get everything from Rx
import 'rxjs/add/operator/toPromise';
import {
IProduct
} from "../models/iproduct";
@Injectable()
export class ProcessJsonService {
private jsonFileURL: string = 'my_url';
constructor(private http: Http) {}
//
getProcesslist(): Observable < IProduct[] > {
return this.http.get(this.jsonFileURL)
.map((response) => { response.json();
return <IProduct[] > response.json();
})
.catch(this.handleError);
}
//
private handleError(errorResponse: Response) {
console.log(errorResponse.statusText);
return Observable.throw(errorResponse.json().error || "Server error");
}
}
这是我的process-list-component.ts
import { Component, OnInit } from '@angular/core';
import { IProduct } from "../models/iproduct";
import {
Http
} from '@angular/http';
import {
ProcessJsonService
} from '../models/myjsonprocess';
import {
Observable
} from 'rxjs/Rx';
@Component({
selector: 'app-product-list',
templateUrl: './product-list.component.html',
styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {
pageTitle: string = 'Product List';
imageWidth: number = 50;
imageMargin: number = 2;
showImage: boolean = false;
listFilter: string = '';
processList: IProduct[];
errorMessage: string;
constructor(private _processJsonService: ProcessJsonService) {
this.processList = [];
}
ngOnInit(): void {
console.log("I SEE DATA HERE: ", this.processList);
this._processJsonService.getProcesslist()
.subscribe(response => this.processList = response);
console.log("I SEE DATA HERE nnnnn: ", this.processList);
}
}
这是我的process-list-component.html
<div class='panel panel-primary'>
<div class='panel-heading'>
{{pageTitle}}
</div>
<div class='panel-body'>
<div class='row'>
<div class='col-md-2'>Filter by:</div>
<div class='col-md-4'>
<input type='text' [(ngModel)]='listFilter' />
</div>
</div>
<div class='row'>
<div class='col-md-4'>
<h4>Filtered by: {{listFilter}} </h4>
</div>
</div>
<div class='table-responsive'>
<table class='table'
*ngIf='processList && processList.length'>
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr >
</tr>
</tbody>
</table>
</div>
</div>
</div>
我做了一个快速的研究,我发现这是因为这两个网址不在同一个域中,是的,我的两个网址不在同一个域中。
请帮助,我不知道CORS以及如何解决这个问题?我错过了一些配置吗?