当我在POST请求中上传Base64图像时，我收到403错误。

huangapple
go评论104阅读模式
英文:

When I upload image as base64 in post request I get error 403

问题

I've translated the code-related part of your text. Here it is:

  1. 当我尝试使用带有POST请求的表单将图像上传到后端时，我收到了403错误。我尝试将X-CSRFToken和"Accept": "application/json"添加到标头中，但一点帮助也没有。我尝试从本地存储中保存的名称向postBody添加所有者，但不知道我犯了什么错误。我使用dj-rest-auth进行身份验证。
  2. 前端有一个fetch功能：
  4. export async function action({ request }) { 
  5.     const data = await request.formData();
  6.     // const file = fileToBase64(data.get('file'))
  7.     console.log(data)
  8.     const postData = { 
  9.       title: data.get('title'),
  10.       image: data.get('base64File'),
  11.     };
  12.     console.log(postData)
  13.     const response = await fetch('http://127.0.0.1:8000/posts', {
  14.       method: 'POST',
  15.       headers: {
  16.         "Content-Type": "application/json"
  17.       },
  18.       body: JSON.stringify(postData),
  19.     });
  20.     if (response.status === 422 || response.status === 401) {
  21.       
  22.       return response;
  23.     }
  24.   
  25.     if (!response.ok) {
  26.       throw json({ message: 'Could not add image.' }, { status: 500 });
  27.     }
  28.     
  29.     
  30.     const resData = await response.json();
  31.     console.log(resData)
  32.     return redirect('/');
  33.   }

Please note that I've retained the code formatting in the translation. If you have further code-related questions or need translations for other parts of your text, please feel free to ask.

英文:

When I try to upload an image to the backend using a form with post request, I get a 403 error. I tried adding X-CSRFToken and "Accept": "application/json" to the headers, it didn't help at all. I tried to add the owner to the postBody from the name that I was saving to the localstorage
I don't know where I made a mistake. I use dj-rest-auth for authentication
There is fetch function from frontend:

  1. export async function action({ request }) { 
  2.     const data = await request.formData();
  3.     // const file = fileToBase64(data.get('file'))
  4.     console.log(data)
  5.     const postData = { 
  6.       title: data.get('title'),
  7.       image: data.get('base64File'),
  8.     };
  9.     console.log(postData)
  10.     const response = await fetch('http://127.0.0.1:8000/posts', {
  11.       method: 'POST',
  12.       headers: {
  13.         "Content-Type": "application/json"
  14.       },
  15.       body: JSON.stringify(postData),
  16.     });
  17.     if (response.status === 422 || response.status === 401) {
  18.       
  19.       return response;
  20.     }
  21.   
  22.     if (!response.ok) {
  23.       throw json({ message: 'Could not add image.' }, { status: 500 });
  24.     }
  25.   
  26.     
  27.     const resData = await response.json();
  28.     console.log(resData)
  29.     return redirect('/');
  30.   }

There is backend serializer:

  1. class PostsSerializer(serializers.HyperlinkedModelSerializer):
  2.     title = serializers.CharField(max_length=60, )
  3.     owner = serializers.ReadOnlyField(source='owner.username')
  4.     # creator_id = UserSerializer(many=False, read_only=True).data
  5.     favorites = serializers.HyperlinkedRelatedField(many=True, read_only=True, view_name='favorite-detail')
  6.     comments = serializers.HyperlinkedRelatedField(many=True, read_only=True, view_name='comment-detail')
  8.     class Meta:
  9.         model = Post
  10.         fields = ['pk', 'url', 'title', 'owner', 'image', 'created_at', 'favorites', 'comments']

And view:

  1. class PostList(generics.ListCreateAPIView):
  3. permission_classes = [permissions.IsAuthenticatedOrReadOnly, IsCurrentUserOwnerOrReadOnly]
  4. queryset = Post.objects.all()
  5. serializer_class = PostsSerializer
  6. ordering_fields = ['created_at', 'favorites']
  7. filter_fields = ['title']
  8. search_fields = ['title']
  9. name = 'post-list'
  11. def perform_create(self, serializer):
  12.     serializer.save(owner=self.request.user)

If you need the full code here is a link to the repository: https://github.com/Cichyy22/imagur-like-site

答案1

得分: 0

在你的表单中包括一个类型为 "file" 的输入字段，以允许用户选择要上传的图像文件。

  1. <form action="/upload" method="post" enctype="multipart/form-data">
  2.   <input type="file" name="image">
  3.   <input type="submit" value="Upload">
  4. </form>
  1. const express = require('express');
  2. const multer = require('multer');
  4. const app = express();
  6. // 配置 multer 以将上传的文件存储在 "uploads" 目录中
  7. const upload = multer({ dest: 'uploads/' });
  9. // 处理上传图像的 POST 请求
  10. app.post('/upload', upload.single('image'), (req, res) => {
  11.   const image = req.file;
  12.   // 处理已上传的图像文件
  13.   res.send('图像上传成功');
  14. });
英文:

Include an input field of type "file" in your form to allow the user to select an image file to upload.

  1. &lt;form action=&quot;/upload&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt;
  2.   &lt;input type=&quot;file&quot; name=&quot;image&quot;&gt;
  3.   &lt;input type=&quot;submit&quot; value=&quot;Upload&quot;&gt;
  4. &lt;/form&gt;
  7. const express = require(&#39;express&#39;);
  8. const multer = require(&#39;multer&#39;);
  10. const app = express();
  12. // Configure multer to store uploaded files in the &quot;uploads&quot; directory
  13. const upload = multer({ dest: &#39;uploads/&#39; });
  15. // Handle the POST request to upload an image
  16. app.post(&#39;/upload&#39;, upload.single(&#39;image&#39;), (req, res) =&gt; {
  17.   const image = req.file;
  18.   // Do something with the uploaded image file
  19.   res.send(&#39;Image uploaded successfully&#39;);
  20. });

答案2

得分: 0

I solved the problem by editing the request:

  1. export async function action({ request }) { 
  2.     const data = await request.formData();
  3.     // const file = fileToBase64(data.get('file'))
  4.     console.log(data)
  5.     const postData = { 
  6.         title: data.get('title'),
  7.         image: data.get('base64File')
  8.     };
  9.     console.log(postData)
  10.     const response = await fetch('http://127.0.0.1:8000/posts', {
  11.         method: 'POST',
  12.         headers: {
  13.             'Authorization': 'Token ' + localStorage.getItem('token'),
  14.             "X-CSRFToken": Cookies.get('csrftoken'),
  15.             "Accept": "application/json",
  16.             "Content-Type": "application/json"
  17.         },
  18.         body: JSON.stringify(postData),
  19.     });
  20.     if (response.status === 422 || response.status === 401) {
  21.         return response;
  22.     }
  23.   
  24.     if (!response ok) {
  25.         throw json({ message: 'Could not add image.' }, { status: 500 });
  26.     }
  27.     
  28.     const resData = await response.json();
  29.     console.log(resData)
  30.     return redirect('/');
  31. }

And by editing the settings file on the backend:

  1. REST_FRAMEWORK = {
  2.     'DEFAULT_FILTER_BACKENDS': (
  3.         'django_filters.rest_framework.DjangoFilterBackend',
  4.         'rest_framework.filters.OrderingFilter',
  5.         'rest_framework.filters.SearchFilter',
  6.     ),
  7.     'DEFAULT_AUTHENTICATION_CLASSES': (
  8.         'rest_framework.authentication.TokenAuthentication',
  9.         'rest_framework.authentication.SessionAuthentication',
  10.     )
  11. }
  12. REST_USE_JWT = True 
  13. JWT_AUTH_COOKIE_USE_CSRF = True
英文:

I solved the problem by editing the request:

  1.  export async function action({ request }) { 
  2.     const data = await request.formData();
  3.     // const file = fileToBase64(data.get(&#39;file&#39;))
  4.     console.log(data)
  5.     const postData = { 
  6.       title: data.get(&#39;title&#39;),
  7.       image: data.get(&#39;base64File&#39;)
  8.     };
  9.     console.log(postData)
  10.     const response = await fetch(&#39;http://127.0.0.1:8000/posts&#39;, {
  11.       method: &#39;POST&#39;,
  12.       headers: {
  13.         &#39;Authorization&#39;: &#39;Token &#39; + localStorage.getItem(&#39;token&#39;),
  14.         &quot;X-CSRFToken&quot;: Cookies.get(&#39;csrftoken&#39;),
  15.         &quot;Accept&quot;: &quot;application/json&quot;,
  16.         &quot;Content-Type&quot;: &quot;application/json&quot;
  17.       },
  18.       body: JSON.stringify(postData),
  19.     });
  20.     if (response.status === 422 || response.status === 401) {
  21.       
  22.       return response;
  23.     }
  24.   
  25.     if (!response.ok) {
  26.       throw json({ message: &#39;Could not add image.&#39; }, { status: 500 });
  27.     }
  28.   
  29.     
  30.     const resData = await response.json();
  31.     console.log(resData)
  32.     return redirect(&#39;/&#39;);
  33.   }

And by editing the settings file on the backend:

  1. REST_FRAMEWORK = {
  2.     &#39;DEFAULT_FILTER_BACKENDS&#39;: (
  3.         &#39;django_filters.rest_framework.DjangoFilterBackend&#39;,
  4.         &#39;rest_framework.filters.OrderingFilter&#39;,
  5.         &#39;rest_framework.filters.SearchFilter&#39;,
  6.     ),
  7.     &#39;DEFAULT_AUTHENTICATION_CLASSES&#39;: (
  8.         &#39;rest_framework.authentication.TokenAuthentication&#39;,
  9.         &#39;rest_framework.authentication.SessionAuthentication&#39;,
  10.     )
  11. }
  12. REST_USE_JWT = True 
  13. JWT_AUTH_COOKIE_USE_CSRF = True

huangapple
  • 本文由 发表于 2023年3月31日 21:36:15
  • 转载请务必保留本文链接：https://go.coder-hub.com/75899175.html
  • dj-rest-auth
  • django
  • django-rest-framework
  • javascript
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定