代码之家  ›  专栏  ›  技术社区  ›  bgschiller

使用AWS Cloudfront避免cor,并清理SPA url

  •  1
  • bgschiller  · 技术社区  · 6 年前

    我有一个单页应用程序,它位于S3中,前面是Cloudfront。SPA还通过AJAX请求与一个后端进行通信。我试着两者兼而有之:

    1. https://keita.blog/2015/11/24/hosting-a-single-page-app-on-s3-with-proper-urls/ ),要求cloudfront将403和404错误重写为200,生成索引页,
    2. 通过向代理添加cloudfront行为来避免CORS问题 /api/* 到服务器(如 https://stackoverflow.com/a/42883221/1586229 ).

    200 index.html

    如果做不到,你能推荐另一种方法来完成我想做的事情吗?

    1 回复  |  直到 6 年前
        1
  •  7
  •   bgschiller    5 年前

    这种行为可以通过λ@边缘。计划如下:

    us-east-1 ,因为这是lambda在λ@边可以定义。

    Cloudfront possible locations for a Lambda@Edge function

    该函数有以下任务:将请求重写到如下路径 /login , /profile , /anything_other_than_assets 进入之内 /index.html . 对我来说,我可以制定规则:

    如果某物有一个扩展,那么它就是一种资产。否则,就是一条路

    const path = require('path')
    
    exports.handler = (evt, ctx, cb) => {
        const {request} = evt.Records[0].cf
    
        if (!path.extname(request.uri)) {
            request.uri = '/index.html'
        }
    
        cb(null, request)
    }
    

    确保“发布新版本”,然后复制arn(位于页面顶部)

    where to copy the ARN of your new lambda function

    Where to paste the ARN of your lambda function

    因为λ@边函数关联的作用域为原始级别,此重定向行为不会影响 /api/* 行为。

    确保删除自定义错误处理程序。您不再需要它们来实现S3行为,也不需要它们来实现api行为。

    推荐文章