「Widget:Custom map」の版間の差分

提供:メタファー リファンタジオ 攻略Wiki
移動先:案内検索
編集の要約なし
編集の要約なし
7行目: 7行目:
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
<script src="https://dq.h1g.jp/leaflet/custom-leaflet-draw-locale.js" ></script>
<script src="https://dq.h1g.jp/leaflet/custom-leaflet-draw-locale.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/lightgallery.min.js"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
13行目: 14行目:
<link rel="stylesheet" href="https://dq.h1g.jp/img/dq10_offline/map/css/leaflet-tag-filter-button.css" />
<link rel="stylesheet" href="https://dq.h1g.jp/img/dq10_offline/map/css/leaflet-tag-filter-button.css" />
<link rel="stylesheet" href="https://dq.h1g.jp/img/marker-icon-img/editable-popup.css" />
<link rel="stylesheet" href="https://dq.h1g.jp/img/marker-icon-img/editable-popup.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/lightgallery.min.js"></script>
<link rel="stylesheet" href="https://dq.h1g.jp/img/lightgallery.min.css"/>
<link rel="stylesheet" href="https://dq.h1g.jp/img/lightgallery.min.css"/>


26行目: 25行目:
// APIベースURLを定数として定義
// APIベースURLを定数として定義
const API_BASE_URL = 'https://prd-h1g-elb-2067013247.ap-northeast-1.elb.amazonaws.com/metaphor_refantazio';
const API_BASE_URL = 'https://prd-h1g-elb-2067013247.ap-northeast-1.elb.amazonaws.com/metaphor_refantazio';
///////////////////
// CORSデバッグ関数の定義
window.debugCORSIssues = function() {
    console.group('=== CORS Configuration Debug Info ===');
   
    // 基本情報の表示
    console.log('1. Basic Information:');
    console.log('Current page URL:', window.location.href);
    console.log('Current origin:', window.location.origin);
    console.log('Target API URL:', API_BASE_URL);
    console.log('Protocol match?', window.location.protocol === new URL(API_BASE_URL).protocol);
   
    // APIリクエストのテスト
    console.log('\n2. Testing API access...');
   
    $.ajax({
        url: API_BASE_URL + '/api.php',
        data: {
            action: 'query',
            meta: 'tokens',
            type: 'csrf',
            format: 'json'
        },
        method: 'GET',
        xhrFields: {
            withCredentials: true
        }
    })
    .done(function(response) {
        console.log('✅ API request successful!');
        console.log('Response:', response);
    })
    .fail(function(xhr, status, error) {
        console.error('❌ API request failed:', {
            status: xhr.status,
            statusText: xhr.statusText,
            error: error,
            response: xhr.responseText
        });
       
        if (xhr.status === 0) {
            console.error('🚫 This appears to be a CORS error.');
            console.error('Check server CORS configuration and ensure the following headers are set:');
            console.error('- Access-Control-Allow-Origin');
            console.error('- Access-Control-Allow-Credentials (if using cookies)');
            console.error('- Access-Control-Allow-Methods');
            console.error('- Access-Control-Allow-Headers');
        }
    })
    .always(function() {
        // レスポンスヘッダーの確認(可能な場合)
        console.log('\n3. Checking response headers...');
        try {
            $.ajax({
                url: API_BASE_URL + '/api.php',
                method: 'OPTIONS',
                complete: function(xhr) {
                    console.log('CORS Headers:', {
                        'Access-Control-Allow-Origin': xhr.getResponseHeader('Access-Control-Allow-Origin'),
                        'Access-Control-Allow-Methods': xhr.getResponseHeader('Access-Control-Allow-Methods'),
                        'Access-Control-Allow-Headers': xhr.getResponseHeader('Access-Control-Allow-Headers'),
                        'Access-Control-Allow-Credentials': xhr.getResponseHeader('Access-Control-Allow-Credentials')
                    });
                }
            });
        } catch (e) {
            console.error('Unable to check CORS headers:', e);
        }
    });
    // 現在のドメインとAPI URLの比較
    console.log('\n4. Domain comparison:');
    try {
        const currentUrl = new URL(window.location.href);
        const apiUrl = new URL(API_BASE_URL);
        console.log('Current domain:', currentUrl.hostname);
        console.log('API domain:', apiUrl.hostname);
        console.log('Same domain?', currentUrl.hostname === apiUrl.hostname);
        console.log('Same protocol?', currentUrl.protocol === apiUrl.protocol);
        console.log('Same port?', currentUrl.port === apiUrl.port);
    } catch (e) {
        console.error('Error comparing domains:', e);
    }
    console.log('\n5. Quick CORS checklist:');
    console.log('□ API_BASE_URL is correctly set');
    console.log('□ Server has CORS headers configured');
    console.log('□ Protocols match (both http or both https)');
    console.log('□ Credentials handling is properly configured');
    console.log('□ Required headers are allowed');
    console.groupEnd();
};
// ヘルプ機能を追加
window.showCORSHelp = function() {
    console.log(`
CORS Debugging Help:
------------------
1. Run 'debugCORSIssues()' to start debugging
2. Check for any red error messages
3. Verify the API URL is correct
4. Ensure protocols match (http/https)
5. Check server CORS configuration
Common Solutions:
--------------
1. Server needs to set Access-Control-Allow-Origin header
2. Use https for both client and server
3. Enable credentials if using cookies
4. Check API_BASE_URL configuration
`);
};
console.log('CORS debugging tools loaded. Type debugCORSIssues() to start debugging or showCORSHelp() for instructions.');
///////////////////


window.savePopupContent = savePopupContent;
window.savePopupContent = savePopupContent;
904行目: 783行目:
     }, 500);
     }, 500);
});
});
//////////////////////
// CORSデバッグヘルパー
function debugCORSIssues() {
    console.group('CORS Configuration Check');
   
    // 現在のオリジンを表示
    console.log('Current Origin:', window.location.origin);
    console.log('Target API URL:', API_BASE_URL);
   
    // テストリクエストを送信
    $.ajax({
        url: API_BASE_URL + '/api.php',
        method: 'OPTIONS',  // プリフライトリクエストをシミュレート
        complete: function(xhr) {
            console.log('CORS Headers received:', {
                'Access-Control-Allow-Origin': xhr.getResponseHeader('Access-Control-Allow-Origin'),
                'Access-Control-Allow-Methods': xhr.getResponseHeader('Access-Control-Allow-Methods'),
                'Access-Control-Allow-Headers': xhr.getResponseHeader('Access-Control-Allow-Headers'),
                'Access-Control-Allow-Credentials': xhr.getResponseHeader('Access-Control-Allow-Credentials')
            });
        }
    });
    // CORSエラーをキャッチするグローバルハンドラー
    $(document).ajaxError(function(event, xhr, settings, error) {
        if (xhr.status === 0) {
            console.error('Potential CORS Error:', {
                targetUrl: settings.url,
                error: error,
                state: xhr.state(),
                status: xhr.status
            });
        }
    });
   
    console.groupEnd();
}
</script>
</script>


</includeonly>
</includeonly>

2024年11月10日 (日) 12:45時点における版