Как решить проблему отсутствия 'Access-Control-Allow-Origin' при создании новых конечных точек с помощью terraform cloudfront и django

Я создал приложение, используя django react, terrafor, aws cloudfront и nginx

все мои конечные точки, над которыми я работал несколько недель, работают хорошо.

Теперь я попытался добавить новые конечные точки, когда я пытаюсь сделать запрос из front end, я получаю следующие ошибки:

Access to XMLHttpRequest at 'https: //api.foo.com/new-url-enpoints/' from origin 'https: //www.foo.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
main.a1abe898.chunk.js:1 Page error:  Error: Network Error
    at e.exports (1.v3s1s213.chunk.js:1:21345)
    at XMLHttpRequest.p.onerror (1.v3s1s213.chunk.js:1:63362)
1.v3s1s213.chunk.js:1          POST https: //api.foo.com/new-url-enpoints/ net::ERR_FAILED 500

S3 ведро


resource "aws_s3_bucket" "my_bucket" {
  bucket        = "some-bucket"
  ...

  cors_rule {
    allowed_headers = [
      "Accept",
      "Accept-Encoding",
      "Authorization",
      "Content-Type",
      "Dnt",
      "Origin",
      "User-Agent",
      "X-Csrftoken",
      "X-Requested-With",
    ]
    allowed_methods = ["PUT", "POST", "GET", "DELETE", "HEAD"]
    allowed_origins = ["https: //www.foo.com"] # i have created the space to be able to post this question on stackoverflow
    expose_headers  = ["Etag"]
    max_age_seconds = 3000
  }

FRONTEND

locals {
  s3_origin_id = "www.foo.com"
}

resource "aws_cloudfront_distribution" "front_end_cloudfront" {
  origin {
    domain_name = aws_s3_bucket.my_bucket.bucket_regional_domain_name
    origin_id   = local.s3_origin_id

    s3_origin_config {
      origin_access_identity = "${aws_cloudfront_origin_access_identity.s3_oai.cloudfront_access_identity_path}"
    }
  }

  enabled             = true
  is_ipv6_enabled     = true
  default_root_object = "index.html"

  aliases = ["www.foo.com"]

  custom_error_response {
    error_caching_min_ttl = 500
    error_code            = 403
    response_code         = 403
    response_page_path    = "/index.html"
  }

  default_cache_behavior {
    allowed_methods  = ["GET", "HEAD", "OPTIONS", "PATCH", "POST", "PUT", "DELETE"]
    cached_methods   = ["GET", "HEAD"]
    target_origin_id = local.s3_origin_id

    forwarded_values {
      query_string = false

      cookies {
        forward = "none"
      }
    }

    viewer_protocol_policy = "redirect-to-https"
    min_ttl                = 0
    default_ttl            = 0
    max_ttl                = 0
  }

  # cache behavior with precedence 0
  ordered_cache_behavior {
    path_pattern     = "/content/immutable/*"
    allowed_methods  = ["GET", "HEAD", "OPTIONS", "PATCH", "POST", "PUT", "DELETE"]
    cached_methods   = ["GET", "HEAD", "OPTIONS"]
    target_origin_id = local.s3_origin_id

    forwarded_values {
      query_string = false
      headers      = ["Origin"]

      cookies {
        forward = "none"
      }
    }

    min_ttl                = 0
    default_ttl            = 0
    max_ttl                = 0
    compress               = true
    viewer_protocol_policy = "redirect-to-https"
  }

  # cache behavior with precedence 1
  ordered_cache_behavior {
    path_pattern     = "/content/*"
    allowed_methods  = ["GET", "HEAD", "OPTIONS", "PATCH", "POST", "PUT", "DELETE"]
    cached_methods   = ["GET", "HEAD"]
    target_origin_id = local.s3_origin_id

    forwarded_values {
      query_string = false

      cookies {
        forward = "none"
      }
    }

    min_ttl                = 0
    default_ttl            = 0
    max_ttl                = 0
    compress               = true
    viewer_protocol_policy = "redirect-to-https"
  }

  ...
}

BACKEND

locals {
  lb_origin_id = "api.foo.com"
}

resource "aws_cloudfront_distribution" "backend_cloudfront" {
  origin {
    domain_name = aws_lb.backend_lb.dns_name
    origin_id   = local.lb_origin_id

    custom_origin_config {
      http_port  = 80
      https_port = 443
      origin_protocol_policy = "http-only"
      origin_ssl_protocols = ["TLSv1.2"]
    }
  }

  enabled             = true
  is_ipv6_enabled     = true

  aliases = ["api.foo.com"]

  default_cache_behavior {
    allowed_methods  = ["GET", "HEAD", "OPTIONS", "PATCH", "POST", "PUT", "DELETE"]
    cached_methods   = ["GET", "HEAD"]
    target_origin_id = local.lb_origin_id

    forwarded_values {
      query_string            = true
      headers                 = ["*"]
      query_string_cache_keys = []

      cookies {
        forward = "none"
      }
    }

    viewer_protocol_policy = "redirect-to-https"
    min_ttl                = 0
    default_ttl            = 0
    max_ttl                = 0
  }

  # cache behavior with precedence 0
  ordered_cache_behavior {
    path_pattern     = "/api/*"
    allowed_methods  = ["GET", "HEAD", "OPTIONS", "PATCH", "POST", "PUT", "DELETE"]
    cached_methods   = ["GET", "HEAD"]
    target_origin_id = local.lb_origin_id

    forwarded_values {
      query_string            = true
      headers                 = ["*"]
      query_string_cache_keys = []

      cookies {
        forward = "none"
      }
    }

    min_ttl                = 0
    default_ttl            = 0
    max_ttl                = 0
    compress               = true
    viewer_protocol_policy = "redirect-to-https"
  }

  ...
}

эта конфигурация продолжает давать сбой, только для новых созданных конечных точек, я думаю, что это должно быть связано с кэшем с cloudfront, но я не уверен, как это исправить

любая помощь будет очень признательна

Я думаю, что нижеприведенная информация должна решить вашу проблему, если ошибка действительно связана с конфигурацией CloudFront. Конфигурация дистрибутива CloudFront должна пересылать заголовки, которые требуются вашему источнику. Если источником является S3 bucket, то настройте дистрибутив на пересылку следующих заголовков на Amazon S3:

  • Access-Control-Request-Headers
  • Access-Control-Request-Method
  • Origin

Шаги для выполнения этого изменения:

  1. Откройте ваш дистрибутив из консоли CloudFront.
  2. Выберите вкладку Behaviors.
  3. Выберите Создать поведение. Или выберите существующее поведение, а затем выберите Редактировать.
  4. В разделе Ключ кэша и запросы происхождения выберите Политика кэша и Политика запросов происхождения. Затем, для политики запросов происхождения, выберите CORS-S3Origin или CORS-CustomOrigin из выпадающего списка.
  5. Выберите Сохранить изменения.

Источник: https://aws.amazon.com/premiumsupport/knowledge-center/no-access-control-allow-origin-error/

Вернуться на верх