Как решить проблему отсутствия '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
Шаги для выполнения этого изменения:
- Откройте ваш дистрибутив из консоли CloudFront.
- Выберите вкладку Behaviors.
- Выберите Создать поведение. Или выберите существующее поведение, а затем выберите Редактировать.
- В разделе Ключ кэша и запросы происхождения выберите Политика кэша и Политика запросов происхождения. Затем, для политики запросов происхождения, выберите CORS-S3Origin или CORS-CustomOrigin из выпадающего списка.
- Выберите Сохранить изменения.
Источник: https://aws.amazon.com/premiumsupport/knowledge-center/no-access-control-allow-origin-error/