問題
Django REST Framework を使って API を作成中、Javascript から POST または DELETE リクエストを送ろうとした結果「POST（リクエスト先 URL） 403 (Forbidden)」のエラー表示。
*DELETE の場合も同じエラーが出ます。
原因
CRSF (Cross Site Request Forgery) に対するセキュリティが働いて、リクエストが拒否されている様子。
解決法
ブラウザのクッキーから CSRF Token を取って、POST リクエストのヘッダーに含めたら解決しました。
元々↓だったところに…
const fetchOptions = {
method: 'POST'
}
fetch('http://example.com/exampleapi',fetchOptions)
クッキーから csfrtoken を抽出して headers に含めて POST リクエストをする様にしました。
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
const fetchOptions = {
method: 'POST',
headers:{"X-CSRFToken": getCookie('csrftoken')}
}
fetch('http://example.com/exampleapi',fetchOptions)
これで一応 POST リクエストが通る様になりました。（HTTP Status 200 が返ってきました。）
DELETE の場合も同じ方法で解決しました。