Search code examples
javascriptnode.jsreactjsapidialogflow-es

POST error issue when accesing dialog flow api in frontend

I was trying to connect my dialogflow model to my chat ui. But when I just passed message from my ui to the dialog flow model through api, it showed me an error message: " POST http://localhost:3000/api/dialogflow/textQuery 404 (Not Found) in the google chrome console.

This is my error log enter image description here

These are my files:

1. This js file contains ui code with some api connection code

import React, { useEffect } from 'react'
import '../assets/css/chatbotscreen.css';
import rbw from '../assets/svg/robotwallpaper.svg';
import hl from '../assets/svg/homelogo.svg';
import bf from '../assets/svg/botface.svg';
import calendar from '../assets/svg/calendar.svg';
import clock from '../assets/svg/clock.svg';
import calculator from '../assets/svg/calculator.svg';
import logout from  '../assets/svg/logout.svg';
import t3 from '../assets/svg/t3.svg';
import send from '../assets/svg/send.svg';
import like from '../assets/svg/like.svg';
import dislike from '../assets/svg/dislike.svg';
import feedback from '../assets/svg/feedback.svg';
import notifications from '../assets/svg/notifications.svg';
import Axios from 'axios';
const ChatbotScreen = () => {

    const textQuery = async (text) =>{
        
        // First we need to take care of I send

        let conversation = {
            who: 'user',
            content: {
                text: {
                    text: text
                }
            }
        }


        //We need to take care of message chatbot sends
        const textQueryVariables = {
            text
        }
        try{

            //I will send request to the textQuery
            const response = await Axios.post('/api/dialogflow/textQuery', textQueryVariables)
            const content = response.data.fulfillmentMessages[0]

             conversation = {
                who: 'bot',
                content: content
             }
             console.log(conversation)
            

        }catch(error) {
            conversation = {
                who: 'bot',
                content: {
                    text: {
                        text: "Error just occured, please check the problem"
                    }
                }
            }
            console.log(conversation)

        }


    }        
    const keypressHandler = (e) => {
            if(e.key === "Enter") {
                if(!e.target.value) {
                    return alert('You need to type something first')
                }

                //We will send request to text query route

                textQuery(e.target.value)

                e.target.value = "";
            }
    }
   
    return (
        <>
          <img src={rbw} className="robowall" alt="robowall" /> 
          <div className="main-container">
            <div className="sub-container 1 grid gap-4 ml-4">

                <div className="1child sc">
                    < div className="flex">
                        <span className="hrchatbot relative top-5 ds">HR CHATBOT</span>
                        <img src={bf} className="botface ds w-40 relative -left-7" alt="botface" />
                    </div>
                </div>

                <div className="2child sc">
                    <div className="usercard ds grid justify-items-center">
                    <div className="usericon rounded-full ds mt-10 ">

                    </div>
                    <div className="userinfocard ds grid grid-rows-3 justify-items-center">
                            <div className="border-b-2 line-1 w-9/12 h-10 mt-8">
                                <span className="relative -bottom-4 name">Name:</span>
                            </div>
                            <div className="border-b-2 line-1 w-9/12 h-10 mt-4">
                                <span className="relative -bottom-4 idno">Id:</span>
                            </div>
                            <div className="border-b-2 line-1 w-9/12 h-10 ">
                                <span className="relative -bottom-4 pos">Position:</span>
                            </div>
                    </div>
                    <div className="logout-icon rounded-full ds flex justify-center items-center">
                    <img src={logout} className="w-auto"/>
                    </div>
                    </div>
                </div>


                <div className="3child sc">
                    <div className="widgets-container ds grid grid-cols-3 justify-items-center">
                        <div className="calendar ds rounded-full mt-10 flex justify-center items-center ">
                        <img src={calendar} className="w-auto"/>
                        </div>
                        <div className="clock ds rounded-full mt-10 flex justify-center items-center">
                        <img src={clock} className="w-auto"/>
                        </div>
                        <div className="calculator ds rounded-full mt-10 flex justify-center items-center">
                        <img src={calculator} className="w-auto"/>
                        </div>
                    </div>
                </div>

            </div>



            <div className="sub-container 2 grid justify-items-center">
                <div>
                    <img src={t3} className="ds relative top-4" />
                </div>


                <div className="chatwindow grid justify-items-center">
                    <div className="userinputs ds grid grid-cols-2">
                        
                        <div className="usermessage  w-96 relative -right-8 flex">
                            <div className="userlogo ds rounded-full relative right-3 top-2"></div>

                                <input placeholder="Write your query" className="query" type="text" onKeyPress={keypressHandler} />
                            
                        </div>
                        <div className="sendmessage rounded-full relative -right-3/4 top-2 flex justify-center items-center ds">
                        <button><img src={send} className=""/></button>
                        </div>
                    </div>
                </div>


            </div>

            <div className="sub-container 3 grid">
                <div className="flex">
                <div className="homesection  flex justify-center items-center mt-4">
                    <div className="welcome">WELCOME</div>
                    <div className="Home rounded-full ds relative -right-3">
                        
                    </div>
                </div>
                <div className="home-button rounded-full ds flex justify-center items-center relative -right-28 mt-4">
                    <img src={hl} className="" />
                </div>
            </div>

            <div className="utilities ds relative -right-96 grid items-center justify-center">
                <div className="like flex justify-center items-center ds rounded-full">
                    <img src={like}/>
                </div>
                <div className="dislike flex justify-center items-center ds rounded-full">
                <img src={dislike}/>
                </div>
                <div className="Message flex justify-center items-center ds rounded-full">
                <img src={feedback}/>
                </div>
                <div className="notification flex justify-center items-center ds rounded-full">
                <img src={notifications}/>
                </div>
            </div>
            </div>
        </div> 
        </>
    )
}

export default ChatbotScreen

2. This file is dialogflow js file

const express = require('express');
const router = express.Router();
const structjson = require('./structjson.js');
const dialogflow = require('dialogflow');
const uuid = require('uuid');

const config = require('../config/keys');

const projectId = config.googleProjectID
const sessionId = config.dialogFlowSessionID
const languageCode = config.dialogFlowSessionLanguageCode


// Create a new session
const sessionClient = new dialogflow.SessionsClient();
const sessionPath = sessionClient.sessionPath(projectId, sessionId);

// We will make two routes 


// Text Query Route

router.post('/textQuery', async (req, res) => {
    //We need to send some information that comes from the client to Dialogflow API 
    // The text query request.
    const request = {
        session: sessionPath,
        queryInput: {
            text: {
                // The query to send to the dialogflow agent
                text: req.body.text,
                // The language used by the client (en-US)
                languageCode: languageCode,
            },
        },
    };

    // Send request and log result
    const responses = await sessionClient.detectIntent(request);
    console.log('Detected intent');
    const result = responses[0].queryResult;
    console.log(`  Query: ${result.queryText}`);
    console.log(`  Response: ${result.fulfillmentText}`);

    res.send(result)
})



//Event Query Route

router.post('/eventQuery', async (req, res) => {
    //We need to send some information that comes from the client to Dialogflow API 
    // The text query request.
    const request = {
        session: sessionPath,
        queryInput: {
            event: {
                // The query to send to the dialogflow agent
                name: req.body.event,
                // The language used by the client (en-US)
                languageCode: languageCode,
            },
        },
    };

    // Send request and log result
    const responses = await sessionClient.detectIntent(request);
    console.log('Detected intent');
    const result = responses[0].queryResult;
    console.log(`  Query: ${result.queryText}`);
    console.log(`  Response: ${result.fulfillmentText}`);

    res.send(result)
})







module.exports = router;

3. This file is index.js file

const express = require("express");
const path = require("path");
const bodyParser = require("body-parser");
const app = express();

const config = require("./server/config/keys");
// const mongoose = require("mongoose");
// mongoose.connect(config.mongoURI, { useNewUrlParser: true, useUnifiedTopology: true })
//   .then(() => console.log('MongoDB Connected...'))
//   .catch(err => console.log(err));

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());


app.use('/api/dialogflow', require('./server/routes/dialogflow'));

// Serve static assets if in production
if (process.env.NODE_ENV === "production") {

  // Set static folder
  app.use(express.static("client/build"));

  // index.html for all page routes
  app.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
  });
}

const port = process.env.PORT || 5000;

app.listen(port, () => {
  console.log(`Server Running at ${port}`)
});
Solution

  • The issue was resolved by this code: Just defined some cors and rectified some path

    app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Headers", "*");
  res.setHeader("Access-Control-Allow-Methods", "*");
  next();
});


app.use('/api/dialogflow', require('./server/routes/dialogflow'));