POST 在前端访问 dialogflow api 时出现错误问题
POST error issue when accesing dialog flow api in frontend
我试图将我的对话流模型连接到我的聊天 ui。但是当我刚刚通过 api 将消息从 ui 传递到对话流模型时,它向我显示了一条错误消息:“ POST http://localhost:3000/api/dialogflow/textQuery 404 (Not Found)
in the google chrome控制台。
这是我的错误日志
这些是我的文件:
1.此 js 文件包含 ui 代码和一些 api 连接代码
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。这个文件是dialogflow js文件
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。这个文件是index.js文件
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}`)
});
交叉检查您的 env 文件中的端口。我猜你应该 POST 在
请求
http://localhost:5000/api/dialogflow/textQuery
问题已通过以下代码解决:
刚刚定义了一些cors并纠正了一些路径
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'));
我试图将我的对话流模型连接到我的聊天 ui。但是当我刚刚通过 api 将消息从 ui 传递到对话流模型时,它向我显示了一条错误消息:“ POST http://localhost:3000/api/dialogflow/textQuery 404 (Not Found)
in the google chrome控制台。
这是我的错误日志
这些是我的文件:
1.此 js 文件包含 ui 代码和一些 api 连接代码
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。这个文件是dialogflow js文件
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。这个文件是index.js文件
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}`)
});
交叉检查您的 env 文件中的端口。我猜你应该 POST 在
请求http://localhost:5000/api/dialogflow/textQuery
问题已通过以下代码解决: 刚刚定义了一些cors并纠正了一些路径
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'));