Search code examples
djangovue.jscorsaxiosdjango-cors-headers

3xx redirect with "no 'Access-Control-Allow-Origin' header is present on the requested resource" error

Repository with the project

I am getting information about blocked access by CORS policy and none of the solutions I looked at seemed to be working.

error message

Access to XMLHttpRequest at 'http://localhost:8000/search' from origin 'http://localhost:8080' has been blocked by CORS policy: No 
'Access-Control-Allow-Origin' header is present on the requested resource.

My server is hosted locally on localhost:8000 and frontend is on loacalhost:8080. I want to post text data in Vue with Axios in file: store.js%43:56 :

   axios.post('http://localhost:8000/search', {
      queryText: 'TEST_TEXT'
   }).then(function (response) {
      // handle success
      console.log(response)
   }).catch(function (response) {
      // handle error
      console.log(response)
   })

the backend is written in Django with Rest API. I followed those instructions but the response is still the same. The view responsible for the response is here and settings were set up here

I do not want to:

  • Disable web security in Chrome
  • Use JSONP
  • Use a third party site to re-route my requests

If anyone would like to run the project just install requirements.txt from main folder and follow README from main and frontend folders.

Solution

  • You need to enable CORS settings in Django look at django-cors-headers.

    Also if you are doing session based authentication, you might have to add some extra settings in your headers. I struggled with Angular2 a while back but I think if you face this issue this answer will be relevant for you.