Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge of this article "how to use django+vue to achieve cross-domain", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use django+vue to achieve cross-domain" article.

Version

Django 2.2.3

Python 3.8.8

Djangorestframework 3.13.1

Django-cors-headers 3.11.0

Cross-domain implementation with django

Note: the method here is for the backend solution leapfrogging, that is, the django side solution leapfrogging.

1. Install the django-cors-headers library pip install django-cors-headers2. Modify the project profile project / settings.py...# Application definitionINSTALLED_APPS = ['django.contrib.staticfiles',' corsheaders', # add: cross-domain component 'rest_framework', # add: DRF Framework' home', # sub-application] MIDDLEWARE = ['corsheaders.middleware.CorsMiddleware', # add: put the first line (other lines are not tested)' django.middleware.security.SecurityMiddleware' ... # configuration information of the CORS group CORS_ORIGIN_WHITELIST = ('http://127.0.0.1:8080', # note here: 1. Http:// must be added or an error will be reported (https not tested) 2. This address is the address that allows cross-domain, i.e. front-end address) CORS_ALLOW_CREDENTIALS = True # allows ajax to carry cookie when making cross-domain requests

At this point, the configuration of the django end is complete.

3. The front-end vue uses axios to access the data interface provided by the back-end django, and installs axiosnpm install axios-S 4. Front-end vue configure axios plug-in, modify src/main.js...import axios from 'axios'; / / add: import axios package / / axios.defaults.withCredentials = true; / / allow ajax to send requests with cookieVue.prototype.$axios = axios; / / Mount objects in vue 5. Cross-domain request data created in XX.vue: function () {/ / get the broadcast graph this.$axios.get ("http://127.0.0.1:8000/book/").then(response = > {console.log (response.data) this.banner_list = response.data}) .catch (response = > {console.log (response)})) / / http://127.0.0.1:8000/book/, this is the backend django interface.

Code

Export default {name: "Book", data () {return {book_list: []} }, created: function () {/ / get broadcast graph this.$axios.get ("http://127.0.0.1:8000/book/").then(response = > {console.log (response.data) this.book_list = response.data}) .catch (response = > {console.log (response)})}} .div1 {margin-top: 100px Height: 1000px} img {width: auto; height: auto; max-width: 100%; max-height: 100%. The above is about "how to use django+vue to achieve cross-domain". I believe you all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to learn more about it, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.