SEOオプション側のサイトでCORSエラーが発生します

Copy
元サイト:     https://example.com
英語サイト:   https://en.example.com
韓国語サイト: https://ko.example.com

必要なレスポンスヘッダー

Copy
Access-Control-Allow-Origin: https://en.example.com
Vary: Origin

Copy
使用できない例:
Access-Control-Allow-Origin: https://en.example.com, https://ko.example.com

Nginxの設定例

Copy
map $http_origin $cors_origin {
    default "";
    "~^https://(en|ko)\.example\.com$" $http_origin;
}

server {
    # 既存の設定

    location / {
        # 既存の設定

        if ($cors_origin) {
            add_header Access-Control-Allow-Origin $cors_origin always;
            add_header Vary Origin always;
        }
    }
}

Apacheの設定例

Copy
<IfModule mod_headers.c>
    SetEnvIf Origin "^https://(en|ko)\.example\.com$" CORS_ALLOW_ORIGIN=$0
    Header always set Access-Control-Allow-Origin %{CORS_ALLOW_ORIGIN}e env=CORS_ALLOW_ORIGIN
    Header always merge Vary Origin
</IfModule>

Next.js Middlewareの設定例

Copy
import type { NextRequest } from 'next/server';
import { NextResponse } from 'next/server';

export function middleware(request: NextRequest) {
  const origin = request.headers.get('origin');
  const allowedOrigin = /^https:\/\/(en|ko)\.example\.com$/;
  const response = NextResponse.next();

  if (origin && allowedOrigin.test(origin)) {
    response.headers.set('Access-Control-Allow-Origin', origin);
    response.headers.append('Vary', 'Origin');
  }

  return response;
}

確認方法

• エラーになっているリソースのURL

• リクエストの Origin

• レスポンスの Access-Control-Allow-Origin

• レスポンスの Vary: Origin

• CDNやプロキシがOrigin別のレスポンスを混在させていないか

• リダイレクト前後の両方でCORSヘッダーが付いているか