使用Postman可以正常工作，但是使用JavaScript的fetch无法正常工作

Question

当在“body”部分填写适当的参数时，向Django Rest API框架发出的POST请求可以通过Postman工作。但是，以下JavaScript代码不能起到同样的作用:

var data = {emp_id:50,emp_name:'test',password:'pass123'};   
fetch('http://127.0.0.1:8000/signup/',{
    method:"POST",
    body: JSON.stringify(data),
    mode:"no-cors",
     headers: {
                "Content-Type": "application/json",
                // "Content-Type": "application/x-www-form-urlencoded",
            },
    })
    .then(response => response.json());

以下是REST-API的views.py中处理POST请求的def：

@api_view(['GET', 'POST', ])
def signup(request):
    serializer = employeeSerializer(data=request.data)
    if serializer.is_valid():
        serializer.save()
        return Response(serializer.data, status=status.HTTP_201_CREATED)
    else:
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

我是新手，请问为什么JavaScript代码无法运行？

编辑： 浏览器控制台显示的错误信息如下：

POST http://127.0.0.1:8000/signup/ 415 (Unsupported Media Type)

- Aseem Kannal

---

结果是什么？如果有任何错误消息，请在开发者工具中查看。 - skyboyer

你不需要另一个.then调用来处理JSON响应吗？ - Robin Zigmond

“有人能告诉我为什么JavaScript代码无法正常工作吗？” - 你的浏览器控制台很可能知道，所以去检查一下吧。它很可能会指出你存在跨域资源共享问题，所以如果这是新闻的话，去了解一下这个关键字吧。 - 04FS

@skyboyer，出现了错误信息：415（不支持的媒体类型）。 - Aseem Kannal

Answer 1

问题在于使用no-cors模式会限制您仅使用简单请求，而简单请求的内容类型只能是application/x-www-form-urlencoded、multipart/form-data或text/plain。实际上，如果您查看浏览器发送请求时的标头，您会发现内容类型从application/json变为了text/plain - 因此会出现错误。

要解决此问题：删除no-cors模式，并在django应用程序的响应中添加cors标头。您可以使用django-cors-headers来实现。

此外，您在postman中没有任何问题，因为它不关心同源策略。

- nebuler

Answer 2

我在这里找到了解决方案：https://learning.postman.com/docs/sending-requests/generate-code-snippets/#generating-code-snippets-in-postman。

使用 Postman，您可以在许多语言中查看请求发送的标头代码（Node Axios、JavaScript Fetch等），然后只需复制粘贴标头和由 Postman 发送到应用程序的所有数据即可。

- Souhail Benlhachemi

---

虽然这个链接可能会回答问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，则仅有链接的答案可能会失效。- 【来自审核】 - Aaron V

漂亮的注释，这个解决了我的问题！ - berlin

Answer 3

尝试将标头更改为

headers: { 
    'Accept': 'application/json',
    'Content-Type': 'application/json' 
}

接受头部被用于决定将数据以何种格式发送回响应客户端，这样做是为了猜测可能会需要哪种格式。

- Headmaster