尽管存在快速路由，但 Axios 在 POST 请求上抛出 404 错误

Question

我正在创建一个 sveltejs/sapper 应用程序。我正在尝试使用脚本标签中的 axios 将一些信息从前端发布到后端快速服务器。尽管从外部来源获取请求成功，但 axios 在发布到快速路由时会抛出 404 错误。请参阅下面发布的这些图片。

server.js

const express = require('express');
const bodyParser = require('body-parser');
const fs = require('fs');
import sirv from 'sirv';
import * as sapper from '@sapper/server';

const app = express();

const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';

app.use(
	sirv('static', {dev}),
	sapper.middleware(),
	bodyParser.json(),
	bodyParser.urlencoded({extended:true})
);

app.post('/task', (req, res) => {
        res.sendStatus(200);
	console.log(req.body);
	// fs.writeFile(`./downloads/${req.body.file}`, req.body.buffer, (err) => {
	// 	if (err) throw err;
	// 	console.log(`${res.file} downloaded to backend server`);
	// });
});

app.listen(PORT, err => {
	if (err) console.log('error', err);
});

前端脚本

<script>
	//variables
	let start = false;
    let url = '';
    let filename = '';
    let downloadProgress = 0;
    let error = false;
    let progressBarStyle = 'bg-success';
    //automated Events
    $:downloadLabel = downloadProgress.toString();
    $:if(downloadLabel == '100') {
        progressBarStyle = 'bg-warning';
        downloadLabel = 'DOWNLOAD COMPLETE! FILE WILL BE TRANSFERED SHORTLY!';
    }
    //axios config
    let config = {
    onDownloadProgress: progressEvent => {
    downloadProgress = Math.floor((progressEvent.loaded * 100) / progressEvent.total); }
    }
	//functions
	function startDownload() {
        start = true;
		axios.get(url, config).then((res) => {
	        if(res.status == 200) {
                let data = {
                    file: filename,
                    buffer: res.data
                }
                axios.post('/task', data).then(() => {
                    console.log('Data sent to server');
                }).catch((err) => {
                    console.log(err);
                });
            }
            else {
                error = true;
            }
		}).catch((err) => {
            error = true;
		});
	}
    function reset() {
        // start = false;
        // url = '';
        // filename = '';
        // downloadProgress = 0;
        window.location.reload();
    }
</script>

浏览器控制台

网络标签

Answer 1

你必须在请求处理程序中发送一些东西：

(req, res) => {
    res.sendStatus(200);
}

Answer 2

你使用sapper， 尝试阅读docs。

示例：

const express = require('express');
import sirv from 'sirv';
import compression from 'compression';
import * as sapper from '@sapper/server';

const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';
const app = express();

app

    /* add your handlers here */
    .post('/task', (req, res, next) => {
        res.sendStatus(200);
        console.log(req.body);
    })

    .use(
        compression({ threshold: 0 }),
        sirv('static', { dev }),
        sapper.middleware()
    )
    .listen(PORT, err => {
        if (err) console.log('error', err);
    });

我找到here解决方案