javascript - 如何使用本地客户端和服务器通过 fetch API 发出 POST 请求?
问题描述
我通过 webpack 和 express 运行两个独立的服务器;开发服务器和客户端服务器。
我在客户端上有一个按钮,我想在单击按钮时向服务器发送 POST 请求。我正在使用https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch中的示例创建请求
const testButton = document.querySelector(`button.test`);
const sendRequest = event => {
event.preventDefault(); //stop or prevents the browser from executing the default action
postData(`http://localhost:8080/`, { answer: 42 }) // line:32
.then(data => console.log(JSON.stringify(data))) // JSON-string from `response.json()` call , line:33
.catch(error => console.error(error));
function postData(url = ``, data = {}) {
// Default options are marked with *
return fetch(url, { // line:38
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'no-cors', // no-cors, cors, *same-origin
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, *same-origin, omit
headers: {
'Content-Type': 'application/json',
// "Content-Type": "application/x-www-form-urlencoded",
},
redirect: 'follow', // manual, *follow, error
referrer: 'no-referrer', // no-referrer, *client
body: JSON.stringify(data), // body data type must match "Content-Type" header
});
// .then(response => response.json()); // parses JSON response into native Javascript objects
}
console.log(`sends POST request from here`);
};
testButton.addEventListener(`click`, sendRequest);
当我单击按钮时,我收到此错误:
sends POST request from here // console.log message in request
POST http://localhost:8080/ 404 (Not Found)
postData @ index.js:38
sendRequest @ index.js:32
index.js:33 {}
package.json 中的脚本
"scripts": {
"start": "webpack",
"dev-server": "nodemon bin/dev localhost 8080",
"dev-client": "webpack-dev-server --port 3000"
}
webpack.config.js 中的 devServer
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
host: 'localhost',
port: 3000,
proxy: {
'/api/': 'http://localhost:8080',
}
},
我已经尝试过这个代理
proxy: {
'^/api/*': {
target: 'http://localhost:8080/api/',
secure: false
}
}
解决方案
- 你启动你的快递服务器了吗?
- 您的快速应用程序是否有空端点映射(它也必须是 POST 映射)?
- 如果您使用 docker(用于 express),它会监听您的内部端口吗?
乍一看,您的请求代码看起来不错。
推荐阅读
- kotlin - 缩短此代码以检查表达式中的 null
- javascript - 使用 jquery 显示块后 Jquery 插件不起作用
- swift - 通过提供自动布局约束来制作具有相同间距的按钮
- syntax - 位向量函数 Z3
- windows - 在 Windows Server 中自动启动我自己的脚本
- python - 如何获得2个连续记录之间的“时间差”?
- sql - 从子查询更新多个字段
- python - 如何在 bs4.element.ResultSet 类型对象中查找标签
- python - 启动程序后,Kivy 崩溃,没有任何错误消息
- unit-testing - 在每个测试中使用 verifyNoMoreInteractions 的缺点是什么?