如何从angular 4传递参数以访问REST API数据

Question

I have created the service to access the REST API data but when i hit the url from the Angular application end then it gives me this error in the console.

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.

So for that the backend guy gave some authentication parameters like

So he is telling me to pass the parameters For Authentication to access the data in my Angular application. Otherwise i can get the same error like CORS.

So my question is how to pass the parameters from my end. I have written the code like this in the user.service.ts where all my services are there.

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());
    }
}

In the component i am calling the service like this:

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);
  }
}

Data binding is like this:

<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>

So can anybody help me that how to pass the parameters to get the data in my application.

Answer 1

Imports:

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

Headers:

    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 
});

Request:

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

You can also specyfi CORS on web api configuration file to add headers to every request.

Answer 2

Try the below thing in web.config file

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

This will definitely help you.