Making axios request to django

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?

Let me guess you are using react start app or one of the many popular setups on the web where the react components are actually served by a node server running on a different port. That actually means the ajax request to drf is a cross origin request. Either setup cors (yes django cors is what you need to google for) or enable your react to be transpiled by node or whatever but served by django — e4c5

Dmitrii G. Dmitrii G. · Accepted Answer · 2018-08-30T15:59:50

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

Making axios request to django

1 Answers