I have created some intents in Google Dialog flow and trying to make a dialog flow api call 'detectIntent' in an Angular application. I'm using ApiAiClient of api-ai-javascript to make the call to Dialog flow. I also use the oAuth2.0 for authentication purposes. The Authentication works fine but when the dialog flow api is called using the ApiAiClient it responds with the below error.
Access to XMLHttpRequest at 'https://asia-south1-dialogflow.googleapis.com/****:detectIntentquery?v=20150910' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I used a chrome plugin to suppress the CORS issue but still I get the below error: Access to XMLHttpRequest at 'https://asia-south1-dialogflow.googleapis.com/****:detectIntentquery?v=20150910' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.**
I want to make this Api call to work without the chrome extension, is there any configuration on the dialog flow api that I can do to fix the CORS issue? Should I be using a API gateway to add specific response headers to suppress CORS? I went through a lot of solutions in the forums but couldn't find an apt solution for this issue.
Following is the code in angular which calls the dialog flow:
**import { Injectable } from '@angular/core';
import { environment } from './environments/environment';
import { ApiAiClient } from 'api-ai-javascript/es6/ApiAiClient';
import { ApiAiConstants, IApiClientOptions, IRequestOptions,IServerResponse } from 'api-ai-javascript';
import { Observable } from 'rxjs/internal/Observable';
import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
// Message class for displaying messages in the component
export class Message {
constructor(public content: string, public sentBy: string) {}
}
@Injectable()
export class ChatService {
readonly token = environment.dialogflow.angularBot;
readonly url = environment.dialogflow.url;
readonly apiVersion = environment.dialogflow.version;
options:IApiClientOptions = {
accessToken: this.token,
baseUrl:this.url ,
}
client = new ApiAiClient(this.options);
conversation = new BehaviorSubject<Message[]>([]);
constructor() {}
// Sends and receives messages via DialogFlow
converse(msg:string) {
const userMessage = new Message(msg, 'user');
this.update(userMessage);
console.log(msg);
return this.client.textRequest(msg).then((res) => {
const speech = res.result.fulfillment.speech;
const botMessage = new Message(speech, 'bot');
this.update(botMessage);
}).catch(err =>{
console.log(err.message);
})
};
// Adds message to source
update(msg: Message) {
this.conversation.next([msg]);
}}**
