Question

我正在创建一个简单的应用来练习将Vue连接到Express服务器。我有一个表单，我试图发送到后端，但我似乎无法将我的数据发送到后端。我收到的错误是：

POST http://localhost:8080/login 404（未找到）

我最好的猜测是我的Vue中的方法在我的服务器上找不到匹配的路由？如果是这样，我很困惑，因为我有登录路线。

在我的Vue脚本中：

const axios = require('axios');

export default {
    data: function() {
        return {
          user: {
            email: '',
            password: ''
          }
        }
    },
    methods: {
      sub() {
        var user = {
          email: this.user.email,
          password: this.user.password
        }
        axios.post('/login', user)
          .then(res => console.log(res))
          .catch(err => console.log(err))
      }
    }
}

按后端点击：

const path = require('path');
const express = require('express');

const app = express();

app.use(express.static(path.join(__dirname, '..')));

app.post('/login', function(req, res) {
  console.log("Server HIT!!!!!!!!!!!!!!!!!!!!")
})

app.get('*', function (req, res) {
  return res.sendFile('../index.html');
});

app.listen(3000);
console.log('Express server listening on port 3000');

Answer 1

Express正在另一个端口上运行，而不是您的vue应用程序。 Vue是标准的http，它是8080，但快速运行在3000这一行：

app.listen(3000);

您要将请求发送到/ login，从您的前端的角度来看是http://localhost:8080，但这不是快递可用的地方。基本上你所要做的就是将请求发送到http://localhost:3000/login，就这么简单。

Answer 2

默认快递不允许交叉来源请求，即app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); });。您必须通过设置中间件来启用它。在您的服务器文件中添加以下行，并且必须在声明任何路由之前

public JProperty(
    string name,
    params Object[] content
)

将Vue连接到Express - 找不到404

2 个答案: