Fetch

使用 Fetch 搭配 Promise 可以使用 resolve 或是 reject 來 繼續下去 或 catch。

function loadFeatureInfo(filename) {
    const url = `/${commonset.lang}/static/${commonset.lang}/feature/${filename}.html`;
    fetch(url)
        .then((res) => {
            if (res.status >= 200 && res.status < 300) {
                return Promise.resolve(res);
            }
            return Promise.reject(res);
        })
        .then((response) => response.text())
        .then((body) => {
            $('.featureinfo-block-container').html(body);
            afterLoadFeatureInfo(filename);
        })
        .catch((res) => {
            svdebug(res);
        });
}

Fetch Cookie

使用 fetch 時預設是不會再發出 request 時自動攜帶 cookie。透過 credentials 的設定，可以讓發出的 request 自帶 cookie。

credentials 有三種情況

• omit: (預設值) Never send cookies.
• include：local 開發環境
• same-origin: production 環境

const getUserStatus = () => (
    fetch(`${YOUR_API}`,
        {
            credentials: process.env.NODE_ENV === 'DEV' ? 'include' : 'same-origin',
        },
    )
        .then((res) => {
            if (res.status >= 200 && res.status < 300) {
                return Promise.resolve(res);
            }
            return Promise.reject(res);
        })
);

使用 credentials 時，也會需要後端配合設定 HEADER Access-Control-Allow-Credentials: true

• 文件

接著在搭配 proxy 設定 Response 的 HEADER，並且要請後端不要再開發用的主機設定 Access-Control-Allow-Origin 統一由前端 proxy 設定。這樣就可以達成在本地端開發跟 server cookie 相關的功能。

proxyServer.on('proxyRes', (proxyRes, req, res) => {
    res.setHeader('Access-Control-Allow-Origin', `http://localhost:8080`);
});

另外，並非只有需要傳送 cookie 的 api 需要加上 credentials，只加一隻的話，送其他的 api 時，後端又會重新給一個 SESSION ID，你就會對照不起來是同一個人了。

尤其在有會員 base 的網站，需要特別注意。