次の方法で共有

ネイティブ認証 JavaScript SDK の CORS ヘッダーを管理するように CORS プロキシ サーバーを設定する

適用対象: 次の内容が外部テナントに適用されることを示す白いチェック マーク記号が付いた緑の円。 外部テナント (詳細)

このガイドでは、シングルページ アプリ (SPA) からネイティブ認証 API を操作しながら CORS ヘッダーを管理するようにローカル CORS プロキシ サーバーを設定する方法について説明します。 CORS プロキシ サーバーは、ネイティブ認証 API がクロスオリジン リソース共有 (CORS) サポートできないことを解決するソリューションです。

この記事で設定した CORS サーバーは、ローカル アプリ開発に使用できます。 また：

CORS プロキシ サーバーを作成する

  1. SPA のルート フォルダーに、 cors.jsという名前のファイルを作成し、次のコードを追加します。

    const http = require("http");
const https = require("https");
const url = require("url");
const proxyConfig = require("./proxy.config");

const extraHeaders = [
    "x-client-SKU",
    "x-client-VER",
    "x-client-OS",
    "x-client-CPU",
    "x-client-current-telemetry",
    "x-client-last-telemetry",
    "client-request-id",
];
http.createServer((req, res) => {
    const reqUrl = url.parse(req.url);
    const domain = url.parse(proxyConfig.proxy).hostname;

    // Set CORS headers for all responses including OPTIONS
    const corsHeaders = {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
        "Access-Control-Allow-Headers": "Content-Type, Authorization, " + extraHeaders.join(", "),
        "Access-Control-Allow-Credentials": "true",
        "Access-Control-Max-Age": "86400", // 24 hours
    };

    // Handle preflight OPTIONS request
    if (req.method === "OPTIONS") {
        res.writeHead(204, corsHeaders);
        res.end();
        return;
    }

    if (reqUrl.pathname.startsWith(proxyConfig.localApiPath)) {
        const targetUrl = proxyConfig.proxy + reqUrl.pathname?.replace(proxyConfig.localApiPath, "") + (reqUrl.search || "");

        console.log("Incoming request -> " + req.url + " ===> " + reqUrl.pathname);

        const newHeaders = {};
        for (let [key, value] of Object.entries(req.headers)) {
            if (key !== 'origin') {
                newHeaders[key] = value;
            }
        }

        const proxyReq = https.request(
            targetUrl,
            {
                method: req.method,
                headers: {
                    ...newHeaders,
                    host: domain,
                },
            },
            (proxyRes) => {
                res.writeHead(proxyRes.statusCode, {
                    ...proxyRes.headers,
                    ...corsHeaders,
                });

                proxyRes.pipe(res);
            }
        );

        proxyReq.on("error", (err) => {
            console.error("Error with the proxy request:", err);
            res.writeHead(500, { "Content-Type": "text/plain" });
            res.end("Proxy error.");
        });

        req.pipe(proxyReq);
    } else {
        res.writeHead(404, { "Content-Type": "text/plain" });
        res.end("Not Found");
    }
}).listen(proxyConfig.port, () => {
    console.log("CORS proxy running on http://localhost:3001");
    console.log("Proxying from " + proxyConfig.localApiPath + " ===> " + proxyConfig.proxy);
});

  2. SPA のルート フォルダーに、 proxy.config.jsという名前のファイルを作成し、次のコードを追加します。

    const tenantSubdomain = "Enter_the_Tenant_Subdomain_Here";
const tenantId = "Enter_the_Tenant_Id_Here";

const config = {
    localApiPath: "/api",
    port: 3001,
    proxy: `https://${tenantSubdomain}.ciamlogin.com/${tenantId}`,
};
module.exports = config;

    • プレースホルダー Enter_the_Tenant_Subdomain_Here を見つけて、ディレクトリ (テナント) サブドメインに置き換えます。 たとえば、テナントのプライマリ ドメインが contoso.onmicrosoft.com の場合は、contoso を使用します。 テナント サブドメインがない場合は、テナントの詳細を 読み取る方法について説明します。

    • tenantId をディレクトリ (テナント) ID に置き換えます。 テナント ID がわからない場合は、テナントの詳細を読み取る方法を確認してください。

  3. SPA package.json ファイルを開き、 scripts オブジェクトに次のコマンドを追加します。

    "cors": "node cors.js",

この時点で、CORS プロキシ サーバーを実行する準備ができました。

CORS サーバーを実行する

CORS プロキシ サーバーを起動するには、ターミナルで次のコマンドを実行します。

npm run cors

関連コンテンツ

  • Last updated on