Detailed explanation of Django+Vue cross-domain environment configuration

Overview

During the development process using Django+Vue, I encountered many problems related to the development environment, such as cross-domain, such as ajax request parameters, etc. This article mainly records and solves some problems encountered during the development process.

Cross-domain without cookies

During the development process of using Vue scaffolding, the server that comes with Vue scaffolding will be used for project debugging, and the server that comes with Vue will be supported.hot reloading , this feature is very useful. However, during the development process, because it needs to interact with the backend, you will encounter cross-domain problems when requesting the backend interface. This problem does not exist in some teams with clear responsibilities, because front-end developers will use the method of Mock data.

Webpack configuration

Using Webpack dev serverproxyTable This can implement the proxy and forward the request to the backend development server. The configuration method is as follows:

proxyTable: {
 '/api': {
  target: 'http://127.0.0.1:8190/',
  changeOrigin: true
 },
 '/manager': {
  target: 'http://127.0.0.1:8000/',
  changeOrigin: true,
 }
}

Just configure the real address you need to request in proxyTable.

Of course, proxyTable also needs more advanced usage, so let’s not step on those unnecessary pitfalls.

Django CORS header configuration

Django configuration cross-domain, you can implement it yourself or use a more useful librarydjango-cors-headers 。

Add the following configuration in Django configuration file:

(1)INSTALLED_APPS The configuration items are as follows:

INSTALLED_APPS = (
  ...
  'corsheaders',
  ...
)

(2) MIDDLEWARE_CLASSES The configuration items are as follows:

MIDDLEWARE = [ # Or MIDDLEWARE_CLASSES on Django < 1.10
  ...
  '',
  '',
  ...
]

CorsMiddlewareThe priority should be as high as possible, such asCorsMiddleware Front.

(3) Add CORS_ORIGIN_ALLOW_ALL Configuration Items

Added in the configuration fileCORS_ORIGIN_ALLOW_ALL Configuration item and set to True

CORS_ORIGIN_ALLOW_ALL = True

Cross-domain Cookies

According to the above configurationwebpack andDjango After configuring, cross-domain Ajax requests can be made in Vue, but the request does not include cookies. If you need to include cookies, you need to configure the following.

Webpack configuration

The Webpack configuration method is the same as that without cookies.

Vue configuration

In Vue, axios needs to be configured globally, and the following configuration is added to:

 = true

Django configuration

If you need to bring cookies in the request, all hosts cannot be allowed in the cross-domain return header in Django. You need to specify a separate host, and the configuration is as follows:

CORS_ALLOW_CREDENTIALS = True

CORS_ORIGIN_WHITELIST = (
  'localhost:8088',
  'localhost:8000',
  '127.0.0.1:8088',
  '127.0.0.1:8000'
)

CORS_ALLOW_HEADERS = (
  'x-csrftoken',
)

inCORS_ALLOW_HEADERSThe configuration item allows custom-defined header fields to be defined in ajax request.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.