跨源资源共享错误：飞行前响应不允许报头

提问者：小点点

跨源资源共享错误：飞行前响应不允许报头

我正在学习如何使用react作为前端，使用django作为后端。每次我点击django服务器的post方法时，我都会收到这些cors问题。这是一个非常实用的应用程序。从react向django服务器发送一个值并打印它。在Django服务器终端中显示“OPTIONS/sample HTTP/1.1”200 0，在react中显示cors错误。我添加了所有不同的类型，但问题仍然存在在此处输入code

React Component Code
import axios from 'axios'
import React, { Component } from 'react'
import App from '../App';
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
axios.defaults.xsrfCookieName = "XCSRF-TOKEN";

class addProduct extends Component {
 constructor(props) {
    super(props)
    this.state  = {
        testId : '12324',
      }

    this.ButtonClicked = this.ButtonClicked.bind(this)
}
ButtonClicked =(e) => {
  e.preventDefault()
  console.log(this.state)
  axios({
        method: 'post',
        url: 'http://127.0.0.1:8000/sample',
        data: this.state.testId,
        crossDomain: true,
        mode : 'CORS',
        headers: {
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "GET,HEAD,OPTIONS,POST,PUT",
            "Access-Control-Allow-Headers": "Origin, Content-Type",
            "Access-Control-Max-Age" : "200"
          }
        
    })
    .then(Response => console.log(Response.data))
  }

   render() {
    
    return (
        <div className = "addProduct">

            <button  type = "submit" onClick = {this.ButtonClicked} >Start</button>
                   
        </div>
      )
    }
   }

 export default addProduct 



   Django Code:
   from django.shortcuts import render
   from django.http import HttpResponse
   # Create your views here.
  def showsample(request):
     username = request.POST.get('testId')

     print("the value is " ,username)

     return HttpResponse("hello world")

在浏览器网络选项中，它显示：

请求的url：http://127.0.0.1:8000/sample推荐人政策：严格起源时交叉起源

请求标题：带有警告符号：显示临时标题

接受：application/json、text/plain、/

访问控制允许标题：来源、内容类型

访问控制允许来源：*

内容类型：应用程序/x-www. form-urlencoded

推荐人：http://localhost:4200/sec ch Hua：“不是品牌”；v=“99”，“铬”；v=“90”，“谷歌浏览器”；v=“90”秒中国移动：？0用户代理：Mozilla/5.0（Windows NT 10.0；Win64；x64）AppleWebKit/537.36（KHTML，如Gecko）Chrome/90.0。4430.85狩猎/537.36

当双击以红色高亮显示的“示例”时。

然后发布请求正在传递，我可以看到Django终端和helloworld的HTTP响应上的输出

共2个答案

匿名用户

纠结了很多之后我找到了答案。

我进口了django。意见。装饰师。csrf导入csrf_豁免，并在url模式中添加此

URL模式

path('sample', csrf_exempt(views.showsample))

]

  from django.urls import path
  from django.views.decorators.csrf import csrf_exempt
  from . import views

  urlpatterns = [

       path('sample', csrf_exempt(views.showsample))
    ]

匿名用户

我在react和ajax上也遇到了同样的问题，我试图通过请求传递这些标题，但没有成功，我安装了Allow CORSchrome扩展，解决了我的问题。

在你的情况下，我不确定，但试试这两种方法。

ALLOWED_HOSTS = ["*"]

安装允许CORS的chrome，或者如果你使用任何其他浏览器必须有其他cors相关的扩展为他们太...

如果没有这方面的帮助，请与我们分享您得到的错误。