我无法从我的开发环境发送帖子请求,而在生产过程中一切正常(Heroku)。我可以使用Postman毫无问题地发送它们,但是前端却无法到达。 这是error的屏幕截图。
Form.vue
<template>
<form @submit.prevent="handleSubmit" class="contact-form">
<div class="sign-up">
<h2 class="form-header">SIGN UP</h2>
<input type="text" id="name" placeholder="Enter Name" maxlength="20" />
<input type="text" id="email" placeholder="Email" />
<input type="password" id="password" placeholder="Password" />
<button class="form-btn">SIGN UP</button>
</div>
</form>
</template>
<script>
export default {
name: "Form",
methods: {
handleSubmit() {
const name = document.getElementById("name").value.trim();
const email = document.getElementById("email").value.trim();
const password = document.getElementById("password").value.trim();
const data = { name, email, password };
console.log(data);
axios.post("/signup", { data }).then(res => console.log(res));
}
}
};
</script>
index.js
require("dotenv").config();
const express = require("express");
const path = require("path");
const cors = require("cors");
const mysql = require("mysql");
const bcrypt = require("bcrypt");
const saltRounds = 10;
const uuidv4 = require("uuid/v4");
const PORT = process.env.PORT || 5000;
const app = express();
app.use(cors());
app.use(express.static(path.resolve(__dirname, "../vue-ui/dist")));
app.get("*", function(request, response) {
response.sendFile(path.resolve(__dirname, "../vue-ui/dist", "index.html"));
});
// Data parsing
app.use(express.urlencoded({ extended: false }));
app.use(express.json());
const connection = mysql.createPool(process.env.CLEARDB_DATABASE_URL);
app.post("/signup", (req, res) => {
bcrypt.hash(req.body.data.password, saltRounds, function(err, hash) {
var sql = `INSERT INTO users VALUES ("${uuidv4()}", "${
req.body.data.name
}", "${req.body.data.email}", "${hash}", NOW());`;
connection.query(sql, function(error) {
if (error) throw error;
});
});
res.send("OK");
});
app.listen(PORT, function() {
console.log(`Listening on PORT ${PORT}`);
});
前端package.json
{
"name": "vue-ui",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@vue/cli-plugin-babel": "^4.0.0",
"@vue/cli-plugin-eslint": "^4.0.0",
"@vue/cli-service": "^4.0.0",
"axios": "^0.19.0",
"babel-eslint": "^10.0.3",
"core-js": "^3.3.2",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.13.0",
"normalize.css": "^8.0.1",
"sass-loader": "^8.0.0",
"vue": "^2.6.10",
"vue-template-compiler": "^2.6.10"
},
"devDependencies": {},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {
"no-console": "off",
"no-debugger": "off"
},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"proxy": "http://localhost:5000"
}
后端package.json
{
"name": "testing",
"version": "3.0.0",
"engines": {
"node": "10.x"
},
"scripts": {
"start": "node server",
"build": "cd vue-ui/ && npm install && npm run build",
"dev": "npm-run-all --parallel dev-server dev-client",
"dev-server": "nodemon server",
"dev-client": "cd vue-ui/ && npm run serve"
},
"cacheDirectories": [
"node_modules",
"vue-ui/node_modules"
],
"dependencies": {
"bcrypt": "^3.0.5",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.16.4",
"mysql": "^2.17.1",
"uuid": "^3.3.3"
},
"devDependencies": {
"nodemon": "^2.0.2",
"npm-run-all": "^4.1.5"
}
}