Node.js 在nodejs/react页面中返回HTML的Json响应

我是新的react和nodejs，通常是全栈开发。我试图在nodejs/react/mysql中创建一个登录页面。现在，我正在尝试对主登录页执行get请求。我想我现在正在努力连接前端和后端

Nodejs app.js：

const express = require('express');
const bodyparser = require('body-parser');
const cors = require('cors');
const app = express();
const mysql = require('mysql');



let connection = mysql.createConnection({
 //Connection is encrypted for security reasons. 
 host: '***********',
 user: '***********t',
 password: '***********',
 database: '***********'
});

 connection.connect(function(err) {
 if (err) {
 return console.error('error: ' + err.message);
 }

 console.log('Connected to the MySQL server.');
});



app.listen(3001, () => { console.log('running on port 3001'); });

app.use(cors()); 
app.use(express.json()); a
app.use(bodyparser.urlencoded({extended: true}));

 app.get('/', (req, res) => { res.send('respond with a resource'); });

componentDidMount（）响应代码/获取请求：

  componentDidMount() {
  // GET request using fetch with error handling
  fetch('/')
     .then(async response => {
         const data = await response.text();
        // console.log(data);
            console.log('test',data);

        // check for error response
        if (!response.ok) {
            // get error message from body or default to response statusText
            const error = (data && data.message) || response.statusText;
            return Promise.reject(error);
        }

        this.setState({ totalReactPackages: data.total })
    })
    .catch(error => {
        this.setState({ errorMessage: error.toString() });
        console.error('There was an error!', error);
    });
   } 

我的sql连接工作正常，我认为连接前端和后端是一个问题。正在更改以下行：

    const data = await response.text();

致：

返回以下错误：

  There was an error! SyntaxError: Unexpected token < in JSON at position 0

发生了一个错误！SyntaxError:JSON中位置0处出现意外标记<

这是它在以下屏幕截图中返回的html：

---

一旦我弄清楚如何连接前端和后端，项目的其余部分应该很容易完成。react UI工作正常，我的SQl连接工作正常。任何帮助都将不胜感激。

您当前正在从主站点获取数据，而不是从您创建的Node.js站点获取数据

您应该将

fetch

更改为：

fetch('http://localhost:3001')

其他信息

您从后端发送的响应不是JSON:

res.send('respond with a resource');

要发送JSON，应使用：

res.json({ message: "respond with a resource" });

然后您将能够使用：

const data = await response.json();

并通过以下方式访问数据：

const message = data.message;

---

对我来说，只需在API url的开头添加“Https://”即可

        fetch(`https://api.openweathermap.org/data/2.5/weather?q=${CITY_NAME}&appid=${API_KEY}`)

---

我花了几天和10多篇文章/SO线程才弄明白，在本地计算机上进行开发时，获取请求会被路由到本地html文档。

您正在进行服务器渲染吗？如果没有，那么获取url需要类似于连接到express服务器的内容。我看不出代码行与更改后的代码行之间的区别。在尝试解压缩响应文本/json之前，您可能还应该检查

repsonse.ok

。为什么要混合异步/等待和承诺链接？对不起，输入错误。现在应该被修复对你有帮助吗？我似乎得到了同样的错误：有一个错误！SyntaxError:如果使用

const data=wait response.text（），则JSON中的位置0处出现意外标记<；控制台日志（数据）输出是什么？只是更多的html。好的，这就是你得到错误的原因。无法将HTML解析为JSON。您需要找出HTML的来源。你是否发布了实际的node.js代码，或者这只是一个示例？我有一堆被注释掉的代码，但我相信这应该是所有的nodejs代码。
        fetch(`https://api.openweathermap.org/data/2.5/weather?q=${CITY_NAME}&appid=${API_KEY}`)