在ReactJS中执行API POST请求时遇到SyntaxError: Unexpected token <
错误,通常是由于以下原因之一:
确保服务器在处理POST请求时返回的是JSON数据,而不是HTML页面。可以通过浏览器的开发者工具查看网络请求的响应内容。
fetch('https://example.com/api/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ key: 'value' })
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('There was a problem with the fetch operation:', error));
确保请求的URL路径是正确的,并且服务器能够正确处理该路径。
fetch('https://example.com/api/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
如果前端和后端不在同一个域名下,需要在服务器端配置CORS。以下是一个简单的Node.js示例:
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
app.post('/api/data', (req, res) => {
res.json({ message: 'Data received' });
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
通过以上方法,你应该能够解决SyntaxError: Unexpected token <
错误。如果问题仍然存在,请检查服务器日志以获取更多详细信息。
领取专属 10元无门槛券
手把手带您无忧上云