在 React 應用程式的根資料夾中，建立名為 cors.js 的檔案，然後新增下列程式代碼：

const http = require("http");
const https = require("https");
const url = require("url");
const proxyConfig = require("./proxy.config.js");
.createServer((req, res) => {
    const reqUrl = url.parse(req.url);
    const domain = url.parse(proxyConfig.proxy).hostname;
    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 proxyReq = https.request(
            targetUrl,
                method: req.method,
                headers: {
                    ...req.headers,
                    host: domain,
            (proxyRes) => {
                res.writeHead(proxyRes.statusCode, {
                    ...proxyRes.headers,
                    "Access-Control-Allow-Origin": "*",
                    "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
                    "Access-Control-Allow-Headers": "Content-Type, Authorization",
                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);
在 React 應用程式的根資料夾中，建立名為 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，請瞭解如何 查看租戶詳細資訊。

開啟 package.json 檔案，然後在 文稿 物件中新增下列命令：
"cors": "node cors.js",
此時，React 應用程式和 CORS Proxy 伺服器已準備好執行。
執行及測試您的應用程式
開啟終端機視窗並瀏覽至您應用程式的根資料夾：
cd reactspa
若要啟動 CORS Proxy 伺服器，請在終端機中執行下列命令：
npm run cors
若要啟動 React 應用程式，請開啟另一個終端機視窗，然後執行下列命令：
cd reactspa
npm start
開啟網頁瀏覽器並瀏覽至 http://localhost:3000/。 註冊表單會出現。
若要註冊帳戶，請輸入詳細數據，選取 [註冊] 按鈕，然後遵循提示。
此時，您已成功建立 React 應用程式，其可使用原生驗證 API 來註冊使用者。 接下來，您可以更新 React 應用程式以登入使用者或重設使用者的密碼。
CORS Proxy 伺服器的其他資訊
在本教學課程中，您會設定本機 CORS 伺服器。 不過，您可以 使用 Azure 函數應用程式來設定反向代理伺服器來管理 CORS 標頭，如測試環境中所述，。
在生產環境中，您可以使用 使用 Azure 函式應用程式設定原生驗證 API 的單頁應用程式反向代理的步驟 來設定您的 CORS Proxy 伺服器。
              教學課程：使用原生驗證，將使用者登入 React 單頁應用程式應用程式。
              教學課程：使用原生驗證在 React 單頁應用程式應用程式中重設密碼。