向 Django 发出 axios 请求

Question

I have a complex problem in sending and receiving data in react to django with axios. I'm not using REST API. This is my Handel function which is related with my signup form tag and after each click on submit button this function executes:

HandelSignUp(e){

e.preventDefault();
let Username = this.refs.username.value;
let Pass = this.refs.pass.value;
let Email =this.refs.email.value;
axios({
  url:'http://127.0.0.1:8000/signupAuth/',
  mothod:'post',
   data:{
    username:this.Username,
    pass:this.Pass,
    email:this.Email
   },
   headers: {
      "X-CSRFToken": window.CSRF_TOKEN,
      "content-type": "application/json"
            }

}).then(respons =>{
  console.log(respons);
})
.catch(err =>{
  console.log(err);
});

and also this is my django urls.py :

urlpatterns = [

path('signupAuth/',ReactApp_View.signupRes),

]

ReactApp_View is my views.py in ReactApp file which I imported correctly. ok now let's see my views.py :

def signupRes(request):
  body_unicode = request.body.decode('utf-8')
  data = json.loads(myjson)
  return HttpResponse(request.body)

after all when I fill my signup fields and then click on button I see this massage in console log of my browser:

Failed to load http://127.0.0.1:8000/signupAuth/ : Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:8000 ' is therefore not allowed access.

What should I do?

and an extra question: what happen in the given url in my axios?

Answer 1

just open your website with the same host url you are trying to call. Use http://127.0.0.1:8000/ instead of localhost

Answer 2

You have to allow requests in backend

CORS_ORIGIN_WHITELIST = (
'http://127.0.0.1:8000',
'http://localhost:8000'
)

or

response["Access-Control-Allow-Origin"] = "*"