“缺少CORS标题'Access-Control-Allow-Origin'。”在Angular 2/4中

时间:2018-01-22 13:52:13

标签: javascript angular angular-ui-router cors django-cors-headers

我正在开发一个使用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以及如何解决这个问题?我错过了一些配置吗?

0 个答案:

没有答案