Angular ChatBot - Unable to communicate with Diagflow


#1

Firstly thanks for sharing Angular series on Building a blog and Chatbot
Its been great learning experience following along in Youtube.

I have setup the project in my laptop. Blog UI is working smoothly but am having trouble in communicating ( Login and Chat)

  1. HTTP Rest endpoint backend for login
  2. HTTP request to Diagflow

In both the cases above, Chrome console returns unauthorized error

Failed to load https://api.dialogflow.com/v1/query: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values 'http://evil.com/, *', but only one is allowed. Origin 'http://localhost:4200' is therefore not allowed access.

Header captured in Network section

Seek community’s help to guide me through this


#2

Hey Nikhil, Have you added any origin in your google project? It is given here that you have added evil.com as an origin in your google project. It is throwing an error for this reason. Try setting it to localhost:4200 or the application to work.

If you have not configured the settings for the chatbot, delete your current agent and create a new agent along with a new google project. This should reset the settings if you have made any.

Thanks and Regards,
koushik


#3

Hey Koushik,

I tried with a new diagflow agent but still same error.

I was very surprised when request header said origin is evil.com
In Diagflow, Project id is ChatBot-xxxxx (where x is number) and do not see evil.com set anywhere

Google says "Allow-Control-Allow-Origin: * chrome extension" causes origin to redirect to evil.com

I tried to Disable Same Origin Policy on Chrome but still end up with the same error

Is there another way to go around this

Thanks,
Nithin


#4

Hello Nithin,

You should not disable the same origin policy. its there for security reasons. Also, its not in the request header but response header. that means your dialog flow bot is configured for evil.com. Also are you using the developer token?


#5

Hey Koushik

Yup , have utilised developer token as instructed in the tutorial
Noted on the point about not disabling Same origin policy, have reverted back the changes


#6

Hey Nithin,

There seems to be some issue with the request as well. I just saw that the origin in your request is also going as evil.com. Can you paste the code for your service here?


#7

Hey Koushik,

Attached screenshot of chat.service.ts file
Note: access token is denoted as x to not make it public


#8

Are you using any cors plugins to enable cors? We dont need to enable any cors here. I think that is causing the evil.com issue.


#9

my assumption is it was enabled by default in chrome.
Currently, progress is that evil.com issue is not occuring after adding the chrome extension to disable cors

But when i enter message in chat text box, theres a 400 error response

It seems strange that “query” parameter in the Request Payload is empty string
Expected: message content


#10

The service seems to be fine. The issue is probably in how you are passing the message to the service. Just do a console.log and check if you are able to check view the message that you are sending,


#11

Thanks for the hint.

During testing i had mentioned message_content.value=’’ before processing the chat message
Now the chat is working perfectly with responses !!

Two questions:

  1. Is it possible to host the site to GitHub pages. If yes, are there instructions available that can be referred
  2. I have used a chrome extension to disable cors. Is there a way to disable cors in the code itself {or what is the suggested workaround when such a scenario occurs in production}

#12

Great you got it working. You can host it on GitHub pages by building the application using ng build and hosting the js, htmls and css files on git pages.

Try running it in incognito mode on the browser and see if the error is still coming. Cors restrictions are not present on dialog flow API and the login service is also allowed from any domain.

I think the browser extensions and the settings are causing these issues.

It’s not an issue with either your application of the dialog flow API.


#13

Hey Koushik,
I got the Angular app uploaded to a Github site. This is how it works

  1. In Login page, i need to enable chrome extension for cors.Otherwise i get below error.
    Once cors plugin is enabled login is successful.

Failed to load https://xxxxxx/: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https:/xxxxxx.github.io' is therefore not allowed access.

  1. Once logged in it navigates to Chat app. Here if chrome extension for cors is enabled i get below error. Once i disable cors it works perfectly

Failed to load https://api.dialogflow.com/v1/query: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values 'http://evil.com/, *', but only one is allowed. Origin 'https://xxxxxx.github.io' is therefore not allowed access.

I am able to get my github.io site working in my laptop { as chrome extension is installed }
I am not able to get the site working in my friends laptop where chrome extension is not installed.

Can you suggest a way to get the github.io site working without dependancy on chrome extension


#14

Hello Nitin,

You can remove the cors extension. I will add the cors headers to my login module. I dont think you will be getting the error then for login. Cors extension is interfering with the way the requests are being sent to the chatbot. I will also be shifting the server in a couple of days. Il update the thing as soon as i am done with it.

Regards,
Koushik


#15

Thanks Koushik.

Once coding is finished at your side how would we be able to access your content.
If there’s a youtube video, request to share it here so that I can also do these changes at in my app.