Reactjs 如何将json文件从s3返回到特定url，但仅返回该url

我有一个特殊的URL，已在其他地方设置，无法更改。

mydomain.com/discountCards

每当服务器向

mydomain.com/discountCards

问题是：

我正在使用mydomain.com上带有react路由器的react应用程序。因此，转到mydomain.com/discountCards会显示一个白色的react页面（因为该url上没有任何内容）

我正在尝试设置Cloudfront以直接链接到s3 JSON文件，该文件可以正常工作，但问题是：

它仅适用于mydomain.com/discountCards.json，不适用于mydomain.com/discountCards

所以。。。。现在，我的s3存储桶有一个名为discountCards.json的文件，但我需要它是discountCard，不带“.json”

还是别的什么

如何使用AWSS3、cloudfront和route 53从s3返回这个.json，作为一个特定域

正如我所说，我使用cloudfront指向我的s3文件进行了所有设置，但它要求我在URL中包含文件扩展名（我不能这样做，URL已经在mydomain.com/discountCards而不是discountCards.json上被锁定）

---

这样其他网站和应用程序就可以获取该URL并返回json。还有其他方法可以实现吗？

我创建了一个lambda函数，它与CloudFront结合使用，可以帮助您实现所需的功能，而无需任何重定向

创建一个S3 bucket，我用两个文件

index.html

和

discountCards.json

将其设置为静态宿主。

云端：

创建一个以S3 bucket静态网站为原点的CF。不要使用下拉列表中的S3存储桶。您使用了不正确的来源，即JSON文件。仅将bucket用作原点，文件夹用作原点路径

接下来，使用以下代码创建lambda函数：

lambda函数将把request.uri修改为您想要提供服务的文件，因为CloudFront正在提供该文件，所以浏览器中的URL将保持不变

保存lambda函数并使用版本号/标记发布它

转到CloudFront分发>行为（选择默认行为）>编辑。转到lambda函数关联页面的底部，选择“原始请求”并粘贴lambda函数ARN（可从lambda函数页面右上角获得），然后保存并使缓存无效。

线路53+Cloudfront+Lambda的实际站点 瞧！页面将在所需路径上提供JSON文件！！没有任何重定向。请记住使缓存无效

所以。。。。现在，我的s3存储桶有一个名为discountCards.json的文件- 但我需要的是没有“.json”的折扣卡

将文件discountCard.json另存为discountCard，扩展名不带.json。见下图

然后在元数据下的属性上，将

内容类型

添加到

应用程序/json

中，请参见下图

现在可以通过此url访问bucket

这个答案是受到这篇文章的启发

---

我希望这个答案会有帮助。谢谢。

只是想知道是否可以使用CloudFront作为源站，在S3存储桶上托管动态静态网站。然后，当CloudFront转到bucket时，默认（索引）页面可能是.json文件？为什么不在S3中使用正确的内容类型（

application/json

）命名文件

discountCards

（无扩展名）work@JohnRotenstein我目前正在使用该桶的索引作为我的react应用程序。所以它被使用了。我已经使用Cloudfront并将我的json设置为源代码，正如我所说，它与文件的确切名称一起工作。我将尝试按照@jogold的建议重命名它。谢谢你会让你know@jogold不起作用。仍然得到反应页面。除非有办法使mydomain.com/discountCards成为CNAME记录，否则我看不出它会如何工作。React显示在该地址上…实际上-这比第一个地址更容易。成功了！非常感谢。我

exports.handler = async (event, context, callback) => {
    const request = event.Records[0].cf.request;
    const headers = request.headers;
    const origin = request.origin;
    const response = event.Records[0].cf.response;

    console.log("The initial origin is " + JSON.stringify(origin)); //Shows the original origin 
    console.log("The Initial request is " + JSON.stringify(request)); //Shows the original origin request  
    const originDomain = origin.custom.domainName;

    // Checks the request uri for the `/discountCards` and replaces it with `/discountCards.json 
    if (request.uri == "/discountCards") {
        request.uri = "/discountCards.json";
    }

    console.log("The final origin is " + JSON.stringify(origin)); //Shows the final origin
    console.log("The final request is " + JSON.stringify(request)); //Shows the final request
    callback(null, request); };