webpackの開発サーバーには、APIリクエストをプロキシする機能が備わっており、開発時のCORS（クロスオリジンリソースシェアリング）問題を効果的に 해결できる。この機能を活用することで、異なるポートやドメイン間で発生する跨域エラーを回避できる。以下、具体的な設定方法と実装例を解説する。

バックエンドサーバーの実装

まず、APIを提供する简易的なNode.jsサーバーを作成する。このサーバーはJSONデータを返却する単純なエンドポイントとして機能する。

backend-server.js

const http = require('http');
const url = require('url');

const userData = [
    { name: "sato1", age: 25, active: true },
    { name: "suzuki2", age: 30, active: true },
    { name: "takahashi", age: 22, active: true },
    { name: "tanaka", age: 28, active: false },
    { name: "yamamoto", age: 35, active: true },
    { name: "watanabe", age: 18, active: true },
];

function handleRequest(request, response) {
    response.writeHead(200, {
        'Content-Type': 'application/json',
        'charset': 'utf-8'
    });

    const parsedUrl = url.parse(request.url, true);
    const queryParams = parsedUrl.query;

    console.log('Received request:', parsedUrl.pathname);

    if (queryParams.action === 'fetchUsers') {
        response.write(JSON.stringify(userData));
    } else if (queryParams.action === 'echo') {
        const responseData = {
            query: queryParams,
            pathname: parsedUrl.pathname
        };
        response.write(JSON.stringify(responseData));
    }

    response.end();
}

const server = http.createServer(handleRequest);
server.listen(9090);

console.log('Backend server started at http://127.0.0.1:9090/');

ターミナル에서 해당 파일이 있는 디렉토리로 이동한 후, 다음과 같이 서버를 실행한다:

node backend-server.js

이렇게 하면 별도의 포트에서 API 서버가 작동하게 된다.

webpack開発サーバーのProxy設定

webpackの設定ファイル（通常はwebpack.config.js）にdevServer.proxyを設定することで、ブラウザからのリクエストをバックエンドサーバーに転送できる。

module.exports = {
    // その他の設定...
    devServer: {
        static: './dist',
        hot: true,
        port: 3000,
        
        // CORS問題を解決するためのProxy設定
        proxy: {
            '/api': {
                target: 'http://localhost:9090',
                pathRewrite: { '^/api': '' },
                changeOrigin: true,
                secure: false,
            }
        }
    }
};

この設定により、http://localhost:3000/apiへのリクエストはhttp://localhost:9090に転送され、跨域制約を回避できる。

フロントエンドの実装

クライアントサイドでは、通常のAJAXリクエストと同じように実装できる。proxyの設定 덕분에、クロスドメインの担忧 없이 APIを呼び出せる。

async function fetchUserData() {
    try {
        const response = await fetch('/api?action=fetchUsers');
        const data = await response.json();
        
        console.log('Fetched data:', data);
        renderUserList(data);
        
    } catch (error) {
        console.error('Request failed:', error);
    }
}

function renderUserList(users) {
    const container = document.getElementById('userList');
    let htmlContent = '';
    
    users.forEach(user => {
        const statusClass = user.active ? 'active' : 'inactive';
        htmlContent += `<li class="${statusClass}">${user.name} (${user.age}歳)</li>`;
    });
    
    container.innerHTML = htmlContent;
}

// 初期化
document.addEventListener('DOMContentLoaded', fetchUserData);

fetchUserData関数を適切なトリガー（比如ボタンクリック）で呼び出すことで、データを取得し、画面に表示できる。

設定時の重要なポイント

パス頭のスラッシュ: proxy設定のキーにある'/api'の最初のスラッシュは必須。これを省略すると404エラーが発生する。
パスRewrite: pathRewriteオプションを使用することで、バックエンドサーバーへのリクエスト時にパスから'/api'前缀を削除できる。バックエンドが/api前缀を想定していない場合に便利。
セキュア設定: secure: falseは、HTTPSで稼働するバックエンドサーバーに対してHTTPリクエストを許可する場合に設定する。
リクエストURLの形式: AJAXリクエストのURLには至少一つのパスセグメント（比如/api、/dataなど）が含まれている必要がある。完全なルートパス（/）のみの場合、ローカルの開発サーバーが応答を返す。

シンプルな構成として、proxy клюーを空文字（'/'）に設定することも可能。その場合、AJAXリクエストのURLはサーバーサイドのエンドポイント構造に応じて自由に記述できる。

以上の設定により、開発環境에서의 CORS問題を効率的に 해결し、本番環境と同様の構成でフロントエンドとバックエンドの連携をテストできる。