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

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!

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.