我正在尝试配置Webpack登录名和注册表单,以将请求代理到运行在8080端口上的后端API。但是,它永远不会到达端口8080,并显示404或400错误。您知道可能是什么原因吗?我尝试了多个Stackoverflow答案,但问题仍然存在。
我的webpack.config.js
:
devServer: {
port: 3000,
open: true,
proxy: {
'/users/**': {
target: 'http://localhost:8080',
secure: false,
changeOrigin:true
}
scripts.js
import './styles.css'
import axios from 'axios';
const API_URL = '/users/'
let loginForm = document.getElementById('signin-form')
loginForm.addEventListener('submit', e => {
e.preventDefault()
let loginFormData = new FormData(loginForm)
console.log(loginFormData)
axios.post(`${API_URL}login/`, loginFormData)
.then(response => {
alert("You've been successfully authorized")
})
.catch(error => alert('wrong credentials, please try again'))
})
index.html
<div class="login-form">
<form action="/users/login/" method="post" id="signin-form">
<input type="text" placeholder="Email or Username" class="input" name="username" id="username"><br />
<input type="password" placeholder="Password" class="input"><br />
<input type="submit" value= "Login" name="btn">
<span><a href="#">I forgot my username or password.</a></span>
</form>
</div>
我得到POST http://localhost:3000/users/login/ 404 (Not Found)
或Failed to load resource: the server responded with a status of 400 (Bad Request)
,它们都在3000端口上