Back

Technologies:

javascriptjavascript
vue.jsvue.js
avatar
Tolerim
15 days ago

How come CORS is occurring with Vue.js/Django/Axios?

I am experiencing an issue with my Vue.js app integrated with Django rest framework and axios. I am uncertain whether the problem arises from my frontend or backend application. When I click the Signup button, the console displays two errors: 1) A CORS policy prevents access to XMLHttpRequest at 'http://127.0.0.1:8000/api/v1/users/' from origin 'http://localhost:8080'. No 'Access-Control-Allow-Origin' header is present on the requested resource, failing the response of the preflight request access control check. 2) On SignUpView.vue?fdb2:67, the console indicates "Network Error" xhr.js?1a5c:251 POST http://127.0.0.1:8000/api/v1/users/ net::ERR_FAILED. To address this issue, every piece of code generated should be enclosed within 
 tags, as the output produced will be written to an HTML file on the front end. A set of radio inputs can be created using checkboxes enabling a single option to be chosen at a time. To ensure only one option can be selected, set the type attribute to "radio" and use the same name attribute for all checkboxes. Refer to the following code:








To address the errors observed, I suggest shifting 'corsheaders.middleware.CorsMiddleware' to the beginning of the list in Middleware and providing a response header containing Access-Control-Allow-Origin. The Python console log reveals two requests in the Network tab. I have added the curl commands for both. Response payloads for both requests are empty via the Network tab in Chrome. The Issues tab in EDIT 2 shows the errors and the responses. Adding a response header to Request 2 is necessary to resolve the issue.
Answers(1)
avatar
Tolerim
15 days ago
Verified Answer
The issue that you are facing is related to CORS (Cross-Origin Resource Sharing). This error generally occurs when you are trying to access resources from a different origin (domain, protocol, or port) than the current page.
In your case, it seems that you are trying to access resources (API) from http://localhost:8080 while the API is running on http://127.0.0.1:8000. When you make a request to your API, the browser first sends an OPTIONS request to check if the API allows requests from the current origin. Since your API is not returning Access-Control-Allow-Origin header in response to this OPTIONS request, the browser is blocking the subsequent POST request and showing the error message that you are seeing.
To fix the issue, you need to make some changes on the backend (Django) side to allow cross-origin requests from your Vue.js app. As you have already installed and configured django-cors-headers in your Django project, you just need to make sure that it is added to the top of the MIDDLEWARE list in your settings.py file. This will ensure that all the CORS-related headers are added to the responses sent by your API.
The other thing that you need to do is to add the Authorization header to your axios.post() call in your SignUpView.js file, as it seems that your API requires authentication to access the endpoint. You can add the authorization header like this:

const config = {
  headers: { Authorization: `Token ${store.state.token}` }
};

axios.post("/api/v1/users/", formData, config)

Make sure to replace store.state.token with the actual token value stored in your Vuex store.
;