Chrome上的POST请求返回405(不允许使用方法)

时间:2020-01-14 17:03:19

标签: node.js express vue.js axios

我无法从我的开发环境发送帖子请求,而在生产过程中一切正常(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"
  }
}

0 个答案:

没有答案