I currently have a free account in SmartyStreets (aka Smarty) and need to integrate the autocomplete functionality. But after integrating the API using static values, it shows a CORS issue. Also, i have already tried the Access-Control-Allow-Origin but that also not working.
So my question is how to resolve the CORS issue?
Also, I have another question I would like to implement two other features.
- autocomplete addresses and populate values in the form.
- the page allows the user to type the address, send the request to SmartStreets, get the response, and display the result along with the form, empty this time, to allow the user to enter another address.
For More Details, please have a look at the below code:
Note: The Frontend code I am using is AngularJs with Typescript.
API Integration:
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";
import { HttpClient, HttpParams } from "@angular/common/http";
@Injectable()
export class commonservice
{
constructor(private httpclient:HttpClient){
}
getaddressauto(): Observable<any> {
let smartauth = new HttpParams().set('auth-id',"72018252-ad10-b627-1234-970404bfd187");
let smarttoken = new HttpParams().set('auth-token',"xuwSg95g4y8AObhEv3hx");
let smartsearch = new HttpParams().set('search',"Louis");
let smartcountry = new HttpParams().set('country',"FRA");
return this.httpclient.get('https://international-autocomplete.api.smartystreets.com/lookup?'+smartauth+'&'+smarttoken+'&'+smartsearch+'&'+smartcountry) ;
}
}
<html>
<head>
<title>SmartyStreets Address Verifier</title>
</head>
<body>
<div class="p-field p-col-4">
<label for="address">Address Line 1</label>
<p-autoComplete [(ngModel)]="addressautocomplete2" [suggestions]="filteredGroup" (completeMethod)="filteraddressautocomplete($event)" (onSelect)="onEndUserSelect($event)" (onClear)="onEndUserSelect(null)" field="name" [minLength]="1" formControlName="EndUserAddressLine1">
</p-autoComplete>
<div *ngFor="let addressauto of addressautocomplete">
<p>{{addressauto.name}}</p>
</div>
</div>
</body>
</html>
