Express：来自 vue.js 的图像不会重定向到后端

如何解决Express：来自 vue.js 的图像不会重定向到后端

我有一个 vue 应用程序，它通过 express 调用后端。当我向请求添加图像时，请求不会重定向到后端。但是，当我直接从 vue 应用程序调用后端时，没有 express，请求被正确处理。图片在途中不知何故丢失了。

Vue 代码：

    uploadImage(){
        this.loadingImage = true
        const url = "/person/"+localStorage.getItem("userUuid")+"/picture";
        var config = {headers: {"Authorization": "Bearer "+localStorage.getItem("token")}};
        const fd = new FormData();
        fd.append('image',this.picture,this.picture.name)
        this.$http.post(url,fd,config)
        .then((response) => {
             console.log(response)
            this.loadingImage = false
             //window.location.reload()
        })
        .catch((error) => {
            console.log(error)
        })

app.js

const proxy = require('express-http-proxy');
const express = require('express')
const fileUpload = require('express-fileupload');
const app = express();

app.post('/person/:id/picture',proxy(config.backendURL,{
    filter: function(req,res) {return checkBearer(req,res)}
}));

解决方法

目前您尝试做的是在公共文件夹中定位图像，因为浏览器假定 /<path> 使用相同的主机和端口。在您的情况下，您使用的是 express，因此您的 API/Web 服务器位于不同的主机和/或端口上。根据您当前的配置，您必须将图像托管在 vue 的 /public 目录中，才能按预期工作。

因此，您需要告诉浏览器在别处寻找图像。由于它位于同一个域 (localhost) 并且位于不同的端口上，因此您可以使用计算属性返回当前主机名。假设您在本地机器上，它将是 localhost 或者我们可以通过 window.location.hostname 动态获取域。

在 Vue 中添加一个计算属性来获取您的域/主机名并像这样更改端口号：

computed:{
   baseUri(){
        return `${window.location.hostname}:3000`;
   }
}

然后修改您的 URL 以包含我们从计算属性中获得的主机名

const url = `${this.baseUri}/person/${localStorage.getItem("userUuid")}/picture`;

现在你的图片应该从正确的服务器加载

---

您还可以向计算属性添加一些逻辑，假设您的图像 URL 托管在生产中的不同域上，但是当您在本地开发时，它们在本地服务器上从 express 运行。

computed:{
   baseUri(){
        return process.env.NODE_ENV === 'development' ? 
            `${window.location.hostname}:3000`:
            'myimages.mydomain.com'; // <-- you can also change the port here if you need
   }
}