英文:
Google Dialog flow API giving CORS issue
问题
以下是您要翻译的内容：
"I have created some intents in Google Dialogflow 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 Dialogflow. I also use OAuth 2.0 for authentication purposes. The authentication works fine, but when the Dialogflow 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 Dialogflow API that I can do to fix the CORS issue? Should I be using an 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 Dialogflow:
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]);
}}
"
英文:
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]);
}}**
答案1
得分: 1
你是否正在使用这个扩展？ <br><br>另外，你可以尝试这个解决方案：
> 从控制台启动 Chrome:
>
>chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security
>
>也许你需要关闭 Chrome 中的所有标签，然后重新启动它。
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论