javascript - Meteor js，React 自定义图像重定向/meteor WebApp

Question

大家好，

我尝试在 meteor 中对图像进行自定义重定向，以便我可以使用较短的自定义链接将我重定向到在亚马逊上传的图像:

WebApp.connectHandlers.use(function(request, response, next) {
      if (~request._parsedUrl.path.indexOf('/image') > -1) {
        response.writeHead(301, {
          Location:
            'https://s3.eu-central-1.amazonaws.com/my-prepo/folder/imageName123456.jpg',
        });
        response.end();
      }
      next();
    });

当我编写时，我可以在jsfiddle这样的外部页面中很好地使用它:

<img src="http://localhost:4003/image" />

但是当我在像 <img src="/image" /> 这样的 React 前端中使用它时，图像不会出现，并且服务器中出现错误:

E20180825-11:59:12.452(3) (webapp_server.js:799) Error running template: Error: Can't set headers after they are sent.
at validateHeader (_http_outgoing.js:491:11)
at ServerResponse.setHeader (_http_outgoing.js:498:3)
at ServerResponse.setWriteHeadHeaders (/home/bux/.meteor/packages/webapp/.1.5.0.1phld1g.dmro++os+web.browser+web.cordova/npm/node_modules/on-headers/index.js:82:19)
at ServerResponse.writeHead (/home/bux/.meteor/packages/webapp/.1.5.0.1phld1g.dmro++os+web.browser+web.cordova/npm/node_modules/on-headers/index.js:41:36)
at getBoilerplateAsync.then (packages/webapp/webapp_server.js:791:13)
at /home/bux/.meteor/packages/promise/.0.10.2.12fknlz.thdv++os+web.browser+web.cordova/npm/node_modules/meteor-promise/fiber_pool.js:43:40

如何才能使用自己的链接来显示像 <img src="/image" 这样的图像？

非常感谢您的建议 此致 布克索

Answer 1

首先，我看到您从 S3 获取图像，而您可能应该通过 Cloudfront 获取它们。主要区别在于缓存。此外，当您将图像保存到 S3 时，请确保设置了“过期”和“缓存控制”，以便您的用户将图像缓存在本地设备上(如果您需要的话)。通过 Cloudfront，您可以拥有像 asset.yourdomain.com/....your asset 这样的链接。

简单且安全的做法是声明一个全局变量，例如

var IMAGE = 'https//........your cloudfront root '

在代码中你最终会得到类似的内容:

<img src={`${IMAGE}/${imagename}.jpg`}

如果您需要完全的安全性并完全“关闭”图像链接/源，您可以使用高度支持的 Ostrio Files Meteor 包。

P