问题描述
点击喜欢的按钮会抛出以下错误：
Failed to load resource: the server responded with a status of 415 (Unsupported Media Type)
代码应该提交点赞操作，检索点赞计数并返回新的序列化数据。在 chrome 上进行了一些调试后，看起来请求标头中有问题，因为当我将打印语句作为视图函数的第一行插入时，它从未打印在控制台上，这表明错误发生在代码之前让它到后端。但是，据我所知，我已经设置了所有必需的标题。在线搜索也没有帮助。所以，我来了。
这是原生 JavaScript 代码：
function handleLikeButtons(){
let likeButtonsEls = document.querySelectorAll("[id^='likeBtn-']")
likeButtonsEls.forEach( (likeBtn) => {
likeBtn.addEventListener( 'click',event => {
event.preventDefault();
// Submit the like
const method = "POST"
const url = likeBtn.getAttribute("data-like-endpoint")
const headerOptions = "json"
const commentId = likeBtn.getAttribute("data-comment-id")
const data = JSON.stringify({"id": commentId,"action": "like"})
// createXHRRequest(method,url,data,updateLikeCount,commentId,headerOptions)
createXHRRequest(method,null,headerOptions)
})
})
}
function createXHRRequest(method,data=null,callbackFn,exTradata = null,headerOptions = null){
const xhr = new XMLHttpRequest()
const responseType = "json"
// console.log(`endpoint: ${url} - callbackFn: ${callbackFn} - exTradata: ${exTradata} - headerOptions: ${headerOptions}`)
if (!url && exTradata){
// Default behavior is to just load comments
displayComments(null,exTradata)
}
xhr.responseType = responseType
xhr.open(method,url)
if (headerOptions && headerOptions === 'json'){
xhr.setRequestHeader("Content-Type","appliction/json")
xhr.setRequestHeader("HTTP_X_REQUESTED_WITH","XMLHttpRequest")
xhr.setRequestHeader("X-Requested-With","XMLHttpRequest")
xhr.setRequestHeader("X-CSrftoken",csrftoken)
}
xhr.onload = () =>{
if(xhr.status < 200 || xhr.status >= 300){
handleLogicError(xhr)
}
if (callbackFn && exTradata){
callbackFn(xhr,exTradata);
}else if(callbackFn){
callbackFn(xhr);
}
}
xhr.onerror = ()=>{
handleNetworkError(xhr)
}
if (data && url){
if (data instanceof FormData ){
for(let item of data.entries()){
console.log(`${item[0]}: ${item[1]}`)
}
}
xhr.send(data);
} else if(url){
xhr.send();
}
}
而且，这是我的 api 视图：
@api_view(['POST','GET'])
@permission_classes([permissions.IsAuthenticated])
def comment_like_view(request,comment_id,*args,**kwargs):
serializer = BlogPostCommentSerializer(data = request.data)
if serializer.is_valid(raise_exception = True):
data = serializer.validated_data
comment_id = data.get("id")
action = data.get("action")
qs = Comment.objects.filter(id = comment_id)
if not qs.exists():
return Response({"message": "No comment here to like"},status=401)
obj = qs.first()
if action == 'like':
obj.likes.add(request.user)
elif action == 'unlike':
obj.likes.remove(request.user)
comment_serializer = serializer(obj)
return Response(comment_serializer.data,status = status.HTTP_201_CREATED)
return Response(serializer.errors,status=status.HTTP_400_BAD_REQUEST)
还有，序列化器：
class CommentActionSerializer(serializers.Serializer):
id = serializers.IntegerField()
action = serializers.CharField()
def validate_action(self,value):
value = value.lower().strip()
if not value in LIKE_ACTIONS:
raise serializers.ValidationError("This is not a valid action")
return value
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）