How to deal with Django+vue cross-domain problem
Editor to share with you how to deal with Django+vue cross-domain problems, I hope you will learn something after reading this article, let's discuss it together!
Because the cross-domain development mode is the front-end and back-end separate development, usually, the front-end and back-end may run under different ip or port, resulting in cross-domain problems, so separately explain what is cross-domain.
Cross-domain means that a document or script under one domain tries to request resources under another domain, where cross-domain is generalized.
In fact, what we usually call cross-domain is narrow, and it is a kind of request scenario restricted by browser homology policy.
What is a homologous strategy?
Homologous policy / SOP (Same origin policy) is a convention introduced by Netscape in 1995. It is the core and basic security function of browsers. Without homologous policy, browsers are vulnerable to XSS, CSFR and so on. The so-called homology means that "protocol + domain name + port" is the same, even if two different domain names point to the same ip address, they are not of the same origin.
The same origin policy restricts the following behaviors:
Cookie, LocalStorage, and IndexDB cannot be read
DOM and Js objects are not available
AJAX request cannot be sent
The following error occurs in the console of the cross-domain error browser:
The error message is as follows:
Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/test/' from origin' http://127.0.0.1:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
XMLHttpRequest access to http://127.0.0.1:8000/api/test/ initiated from the source address http://127.0.0.1:3000 violates the same origin policy: because there is no value of Access-Control-Allow-Origin in the request header
Frontend solution cross-domain
Refer to the blog
Since the cross-domain is due to different sources, I am not done with the same origin, but the request address of the backend cannot be changed, so you can add a proxy between the frontend and the backend, and the frontend accesses the backend through the proxy.
Proxy functionality is already available in the Vue-cli tool, and all you need to do is configure it.
The following configuration items are found in the config/index.js file under the root directory:
ProxyTable: {'/': {target: 'http://127.0.0.1:8000/', changeOrigin: true, pathRewrite: {' ^ / api':'}
'/' means that paths that begin with'/'(that is, all paths) require proxies
Target: the destination server address (i.e. the backend server address) of the agent is' http://127.0.0.1:8000/',
ChangeOrigin, to modify the source: modify the source address in the request
PathReWrite:URL path rewriting, replacing'/ api' with''for paths that start with' / api'
Backend solution cross-domain
For security reasons, the backend will also have restrictions on cross-domain. The solution is as follows:
Install django-cors-headers
$pip install django-cors-headers
Configure the settings.py file
INSTALLED_APPS = [... 'corsheaders',.] MIDDLEWARE = (... 'corsheaders.middleware.CorsMiddleware',' django.middleware.common.CommonMiddleware', # Note the order.) # Cross-domain increase ignores CORS_ALLOW_CREDENTIALS = TrueCORS_ORIGIN_ALLOW_ALL = TrueCORS_ALLOW_METHODS = ('DELETE',' GET', 'OPTIONS',' PATCH', 'POST',' PUT', 'VIEW' ) CORS_ALLOW_HEADERS = ('XMLHttpRequest',' Xuan FILENAMEN, 'accept-encoding',' authorization', 'content-type',' dnt', 'origin',' user-agent','x Murray csrftokenfolk,'x color requestdwectedlywithdrawing, 'Pragma',) have finished reading this article I believe you have a certain understanding of "how to deal with Django+vue cross-domain problems". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!
