Fetch 的使用注意事項

1. Content-Type

Content-Type 跟 body 的設定要一致，例如： 設定 Content-Type: 'application/json'，body 就要設定好物件的型態，若 body 設定成字串，就會出錯。

2. credential 接收 cookie

fetch 預設上不傳送或接收任何 cookies，如果網站依賴 session 會導致請求回傳未經認證，需要使用 cookies 必須額外設定 credentials。

fetch('https://example.com', {
  credentials: 'include'  
})

3. 對 mode 的誤解

當我對不同網域發出 request 時，若 server 端沒有設定開放 CORS 的限制，我會被擋下來，而無法存取，例如我要 POST 到 Google:

const apigoogle = 'https://google.com'
    const data = {
        name: 'rock070'
    }
const request = fetch(apigoogle, {
    method: "POST",
    body: JSON.stringify(data),
    headers: new Headers({
        'Content-Type': 'application/json'
    })
})

request.then( res => res.json())
       .catch(error => console.log('Error:', error))
       .then( response => console.log('Success:', response));

這時，很多人會認為只要將 fetch 裡的屬性 mode，調整成 mode: 'no-cors'，就可以避免 CORS，其實不是！

mode: 'no-cors 在設定上的意義是，告訴瀏覽器，我本來就知道 server 對於這個 request 是沒有設定可以存取 CORS 的，我本來就拿不到 response，我設定mode: 'no-cors，是為了，就算無法存取，也不要跑到 .catch() 那邊，讓它出現 Error。

const apigoogle = 'https://www.google.com/'
const data = {
    name: 'rock070'
}
const request = fetch(apigoogle, {
    method: "POST",
    body: JSON.stringify(data),
    headers: new Headers({
        'Content-Type': 'application/json'
    }),
    mode: 'no-cors'
})

request.then( res => {
              console.log(res)
              return res.json()
            })
       .catch(error => console.log('Error:', error))
       .then( response => console.log('Success:', response));

一樣拿不到 server 的 response，但會拿到一個 status: 0 的 response。

結論：在 CORS 的限制底下，只有 server 開放 CORS 存取，你才拿得到 response，如果沒有開放，就一定拿不到。