Netlify重定向时的CORS问题排查求助

场景与需求 #

• 部署在Netlify上的SvelteKit项目，需要实现：用户访问mynetlifyproject.com/route时，渲染来自另一域名app.myrailsproject.com/route的内容。

已配置的Netlify重定向规则 #

在Netlify项目中创建_redirects文件，添加以下配置：

/route/*                  https://app.myrailsproject.com/route/:splat                                   200

遇到的问题 #

部署测试后，HTML和CSS内容可正常加载，但控制台出现脚本获取失败的CORS错误：

Access to script at 'https://app.myrailsproject.com/vite/assets/script.af31239f.js' from origin 'https://www.mynetlifyproject.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

已尝试的解决方案（均无效） #

1. Rails应用CORS配置 #

添加了两种CORS规则（指定域名和允许所有来源）：

allow do
  origins 'https://www.mynetlifyproject.com'

  resource '/vite/assets/*',
            headers: :any,
            methods: [:get, :options],
            expose: ['Access-Control-Allow-Origin']
end
allow do
  origins '*'
  resource '/public/vite/assets/*', headers: :any, methods: [:post, :get],
  expose: ['Access-Control-Allow-Origin']
end

2. NGINX CORS配置 #

在NGINX配置文件中添加了针对/vite/assets/目录及特定文件的CORS头：

cat myapp_production
upstream puma_myapp_production {
  server unix:/var/www/myapp/shared/tmp/sockets/myapp-puma.sock fail_timeout=0;
}

server {
  listen 80;
  server_name localhost myapp.local;
  root /var/www/myapp/current/public;
  try_files $uri/index.html $uri @puma_myapp_production;

  client_max_body_size 4G;
  keepalive_timeout 10;

more_set_headers 'X-Debug-CORS: $http_origin';

  error_page 500 502 504 /500.html;
  error_page 503 @503;

  location @puma_myapp_production {
    proxy_http_version 1.1;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;
    proxy_redirect off;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
proxy_read_timeout 300;
   proxy_connect_timeout 300;
   proxy_send_timeout 300;
      proxy_set_header X-Forwarded-Proto http;
      proxy_pass http://puma_myapp_production;
    # limit_req zone=one;
    access_log /var/www/myapp/shared/log/nginx.access.log;
    error_log /var/www/myapp/shared/log/nginx.error.log;
  }

  location ^~ /assets/ {
    gzip_static on;
    expires max;
    add_header Cache-Control public;
  }

location ~ ^/vite/assets/ {
    add_header 'Access-Control-Allow-Origin' '*' always;
}

location = /vite/assets/indica.f8da5aba.js {
    add_header 'Access-Control-Allow-Origin' '*' always;
    add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;
}

location = /vite/assets/chart.9bbb5b62.js {
    add_header 'Access-Control-Allow-Origin' '*' always;
    add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;
}

  location ^~ /packs/ {
    gzip_static on;
    expires max;
    add_header Cache-Control public;
  }

  location = /50x.html {
    root html;
  }

  location = /404.html {
    root html;
  }

  location @503 {
    error_page 405 = /system/maintenance.html;
    if (-f $document_root/system/maintenance.html) {
      rewrite ^(.*)$ /system/maintenance.html break;
    }
    rewrite ^(.*)$ /503.html break;
  }

  if ($request_method !~ ^(GET|HEAD|PUT|PATCH|POST|DELETE|OPTIONS)$ ){
    return 405;
  }

  if (-f $document_root/system/maintenance.html) {
    return 503;
  }
}

内容的提问来源于stack exchange，提问作者Thiago David