角4からREST APIデータにアクセスするためのパラメータを渡す方法

Question

REST APIデータにアクセスするためのサービスを作成しましたが、AngularアプリケーションのURLからURLを取得するとコンソールにこのエラーが表示されます。

Failed to load http://<SERVER.URL.FROM.SERVER>/api/invoice-details/121: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 403. 

ので、バックエンドの男は

のようないくつかの認証パラメータを与えたので、彼は私のアンギュラアプリケーション内のデータにアクセスするために認証のためのパラメータを渡すために私に言っていることについて。さもなければ、私はCORSのような同じエラーを得ることができます。

私の質問は、私の最後からパラメータを渡す方法です。私はすべてのサービスがそこにあるuser.service.tsにこのようなコードを書いています。私はこのようなサービスを呼び出していますコンポーネントで

import { Http, Headers, RequestOptions, Response } from '@angular/http'; 

@Injectable() 
export class UserService { 

    private headers = new Headers({ 'Content-Type': 'application/json', 'charset': 'UTF-8' }); 
    private options = new RequestOptions({ headers: this.headers, withCredentials: true }); 

    constructor(private http: Http, private config: AppConfig) {} 

getSupplierBasicInfo(){ 
     return this.http.get(this.config.apiUrl + 'api/supplier-basic-info/121') 
     .map(response => response.json()); 
    } 
} 

：

import { Component, OnInit } from '@angular/core'; 
import { UserService } from '../../services/user/user.service'; 

@Component({ 
    selector: 'app-invoice', 
    templateUrl: './invoice.component.html', 
    styleUrls: ['./invoice.component.css'] 
}) 
export class InvoiceComponent implements OnInit { 
    invoiceDetails: any[]; 
    constructor(private _userService: UserService) { 
    console.log('Invoice Details loaded!'); 
    } 

    ngOnInit() { 
    this._userService.getInvoiceDetails() 
    .subscribe(data => this.invoiceDetails = data); 
    } 
} 

データバインディング、このようなものです：

<table class="table table-striped"> 
    <thead class="thead-dark"> 
     <tr style="background-color:#55555A; color:#ffffff"> 
     <th scope="col">Req ID</th> 
     <th scope="col">Date</th> 
     <th scope="col">Category</th> 
     <th scope="col">Details</th> 
     <th scope="col">Status</th> 
     <th scope="col">View</th> 
     <th scope="col">Download</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="let item of orderDetails"> 
      <td>{{ item.title }}</td> 
      <td>{{ item.field_date }}</td> 
      <td>{{ item.field_date }}</td> 
      <td>{{ item.field_first_name }}</td> 
      <td>{{ item.field_upload_invoice }}</td> 
      <td><i class="fa fa-eye" aria-hidden="true"></i></td> 
      <td><span class="glyphicon glyphicon-download"></span></td> 
     </tr> 
    </tbody> 
    </table> 

だから、誰がどのようにパラメータを渡すことを私を助けることができます私のアプリケーションでデータを取得します。

Answer 1

輸入：

import { Http, Headers, URLSearchParams, RequestOptions } from '@angular/http'; 

ヘッダ：

private headers = new Headers([ 
      { 'credentials': 'same-origin' }, 
      { 'Access-Control-Allow-Origin': '*' }, 
      //instead of * you can specify your host 
      { 'Access-Control-Allow-Credentials': 'true' }, 
     ]); 
     //private params: URLSearchParams = new URLSearchParams(); 
     private options: RequestOptions = new RequestOptions({ headers: this.headers, 
withCredentials: true 
}); 

要求：

this.options.search = this.params; 
this.http.get(`${this.host}${this.url}`, this.options) 
      .map(result => result.json()); 

また、私たちにCORSをspecyfiすることができますbapi構成ファイルを使用して、すべての要求にヘッダーを追加します。

Answer 2

は、これは間違いなくあなたを助ける

<httpProtocol> 
    <customHeaders> 
    <add name="Access-Control-Allow-Origin" value="*"/> 
    </customHeaders> 
</httpProtocol> 

web.configファイルに以下の事を試してみてください。