正しいaxios.postの書き方が知りたい

React(TypeScript)で以下の処理を書いています。Djangoで作成したAPIに対し、JWT認証でPOSTを実行しようとしています。API側には permission_classes = [IsAuthenticatedOrReadOnly] が記載されており、認証後にしかPOSTを実行できないように設定しています。

const user = {
            userid: 'testuser',
            pw: '12345',
}

axios.post('http://xxx.xxx.xxx.xxx/api/vi/accounts/',user,
	{headers: {
		'Content-Type': 'application/json',
		'Authorization': `JWT ${cookies.get('accesstoken')}`
	}})
        .then(res => {
            console.log(res);
         })

この処理を実行後、WebConsoleには

POST http://xxx.xxx.xxx.xxx/api/vi/accounts/ 401 (Unauthorized)

と出力されていました。cookies.get('accesstoken')には正しい値が入っています。axios.postのオプションの書き方は、この書き方で合っているでしょうか？

▽追記
以下の書き方に修正をしましたが、うまくいきませんでした。

        axios({
            method: 'post',
            url: 'http://xxx.xxx.xxx.xxx/api/v1/accounts/',
            data: { user
              },
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `JWT ${cookies.get('accesstoken')}`
            }});

maisumakun

2022/10/27 08:07

ブラウザの開発ツールで通信の詳細は確認しましたか？

sasaki0628

2022/10/27 08:16

以下のメッセージが出力されていました。 settle.js:24 Uncaught (in promise) AxiosError {message: 'Request failed with status code 401', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …} code : "ERR_BAD_REQUEST" config : {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …} message : "Request failed with status code 401" name : "AxiosError" request : XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …} response : {data: {…}, status: 401, statusText: 'Unauthorized', headers: AxiosHeaders, config: {…}, …} stack : "AxiosError: Request failed with status code 401\n at settle (webpack://frontend/./node_modules/axios/lib/core/settle.js?:24:12)\n at XMLHttpRequest.onloadend (webpack://frontend/./node_modules/axios/lib/adapters/xhr.js?:117:66)" [[Prototype]] : Error

maisumakun

2022/10/27 08:17

コンソールの出力ではなく、ネットワーク通信を確認できるタブがあるのでそちらを確認してみてください。どんなヘッダが付いたリクエストかも容易に確認可能です。

sasaki0628

2022/10/27 08:36

ありがとうございます。ネットワーク通信のタブは見たことがありませんでした。以下のメッセージが出力されていました。 General Request URL: http://xxx.xxx.xxx.xxx/api/v1/accounts/ Request Method: POST Status Code: 401 Unauthorized Remote Address: xxx.xxx.xxx.xxx:80 Referrer Policy: same-origin Response Headers Allow: GET, POST, HEAD, OPTIONS Connection: Keep-Alive Content-Length: 55 Content-Type: application/json Cross-Origin-Opener-Policy: same-origin Date: Thu, 27 Oct 2022 08:14:50 GMT Keep-Alive: timeout=5, max=96 Referrer-Policy: same-origin Server: Apache Vary: Accept,Origin WWW-Authenticate: JWT realm="api" X-Content-Type-Options: nosniff X-Frame-Options: DENY Request Headers Accept: application/json, text/plain, */* Accept-Encoding: gzip, deflate Accept-Language: ja Authorization: JWT eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjY2ODYwMjg4LCJqdGkiOiI0ZWRmNjQxYmVlY2M0MTVmODE3NjBhYjZhZTI5MDRlMCIsInVzZXJfaWQiOjF9.WKQXFA3ZhGi2Nem0W_HX-lqry_a1hsbcwRLKVkkttlY Connection: keep-alive Content-Length: 141 Content-Type: application/json Cookie: csrftoken=wFCun2gMPgHGQhpGd0VZI8oWAGxomEIB; sessionid=xfqhcg4ygeq4heyn1uz9k82pvbqot2k1; accesstoken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjY2ODYwMjg4LCJqdGkiOiI0ZWRmNjQxYmVlY2M0MTVmODE3NjBhYjZhZTI5MDRlMCIsInVzZXJfaWQiOjF9.WKQXFA3ZhGi2Nem0W_HX-lqry_a1hsbcwRLKVkkttlY; refreshtoken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoicmVmcmVzaCIsImV4cCI6MTY2Njk0NDg4OCwianRpIjoiNTFkNmZiY2VkZDAyNDRjNzg4OWEwMjA1MDYyYTcwMDIiLCJ1c2VyX2lkIjoxfQ.faETJA2jWi86kG2AJh__9YqHFxsUCWTymzzDdhb7uo0 Host: xxx.xxx.xxx.xxx Origin: http://xxx.xxx.xxx.xxx Referer: http://xxx.xxx.xxx.xxx/test Sec-GPC: 1 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

sasaki0628

2022/10/27 09:02

送っている情報は問題なさそうに見えるので、Django側の設定を見直してみます。