Axiosでcookieを送りたい

Question

前提

Next.jsでAPI Routerにサーバーを立てそこに向けてaxios通信をしている

headerにcookieという名前で値を付与しているが、そもそもそのやり方が正しいのかわからない

実現したいこと

Axiosでcookieを送りたい

ディベロッパーツール→ネットワークのところにcookieのタブを表示させたい

発生している問題・エラーメッセージ

axiosの設定でwithCredentials:trueにしても何も起こらない

フロント側から通信した場合
**Refused to set unsafe header "cookie"**というエラーでheaderに付与したcookieが送れない

サーバーサイドで通信した場合
headerに付与したcookieの値は送れている

該当のソースコード

フロント側で通信した場合(headerのcookieは送れない)

useEffect(()=>{
  axios.defaults.withCredentials=true
  
  axios({
    method:'POST',
    url:'/api/maker',
    headers:{cookie:'ttttt',withCredentials:true},
    withCredentials:true
        })
  .then(e=>{
    console.log(e.data)
   )
  })
},[])

サーバサイドで通信した場合(headerのcookieは送れているパターン)

    export const getServerSideProps = async (
      context: GetServerSidePropsContext,
    ) => {
          const create:AxiosInstance = axios.create({
            baseURL: 'http://localhost:3000',
            headers:{cookie:'ttttt',withCredentials:true},
            method:'POST',
            withCredentials:true
          })

      const res=await create({
        url:'/api/maker',
        withCredentials:true
      }).then((e)=>e)
     
      return {props:res.data}
    }

試したこと

フロントとサーバー側の両方で通信をすること
header内・外にwithCredentials:trueを記載すること
axios.defaults.withCredentials=trueで設定をすること

そもそもローカルホストだとcookieが使えないのでしょうか？

ご回答よろしくお願い致します

Comments

[yuma.inaura]

どうなんでしょう、調べているとそもそもフロントからは任意の値のCookieを送る仕組みはないようにも思えてきますが…

Answer 1

headerにcookieという名前で値を付与しているが、そもそもそのやり方が正しいのかわからない

これは間違っています。禁止ヘッダー名というのが決まっていて、header名にcookieは指摘できません。

Forbidden header name (禁止ヘッダー名) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

Cookieはサーバー側でセットするのが基本で、APIに送りたいCookieはAPI側でセットするべきものです。

Comments

[shunta80]

next.jsのサーバーサイドでheaderにcookieという名前で指定するのもダメなのでしょうか？

[shunta80]

https://stackoverflow.com/questions/63860373/how-to-use-cookie-inside-getserversideprops-method-in-next-js

こちらのサイトでは問題ないような記述があります

[ockeghem]

サーバーサイドであれば問題ありませんし、それは既にできているのですよね。禁止ヘッダーはブラウザ側の制約です。ブラウザから送信したいというご質問でしたので、上記のように回答しました。

[shunta80]

ありがとうございます