Django's method to solve CORS cross-domain problems

Causes of cross domain issues

Cross-Origin Resource Sharing（CORS）Cross-domain problems selenium ， playweight are often encountered in front-end and back-end projects and automated test codes. This problem does not exist when using python request, curl, postman non-browser code to send requests.
This is because of the browser's same-origin policy, in order to isolate potentially malicious files, and to defend against crooked attacks, browsers restrict documents or scripts loaded from the same source from interacting with resources from another source.
When using Ajax, Axiosto send a request, unless the domain name and port number of the current host are the same as the domain name port number of the service program, a CORScross-domain error will occur and the response cannot be received. Even if the javascript script is running on the local browser, the django service Also running on http://localhost:8000, CORS errors still occur.

On the django server side, there are two ways to solve CORSthe problem

Solution 1: Modify the request header through custom middleware

In the myproject/app/ directory, create a new cors.py file

class CorsMiddleware(object):
    def process_response(self, req, resp):
        response["Access-Control-Allow-Origin"] = "*"
        return response

This class is used to add an Access-Control-Allow-Origin:* parameter to each django request, but it needs to be added to the list of middleware classes: in settings.py first,

MIDDLEWARE_CLASSES = (
    #...
    'app.CorsMiddleware' 
)

You can also add more header parameters through this custom middleware class.

Solution 2: Implemented through the django-cors-headers library

It is realized through the third-party library django-cors-headers library, and the steps are as follows

1) Install

pip install django-cors-headers

2) Modify the settings.py configuration file

add to application list

INSTALLED_APPS = (
    ##...
    'corsheaders'
)

Add middleware listcorsheaders.middleware.CorsMiddleware

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    ......

Then, add the following configuration to allow all domain access

CORS_ORIGIN_ALLOW_ALL = True

Alternatively, allow certain domains to access

CORS_ORIGIN_ALLOW_ALL = False
# 允许域名加入白名单
CORS_ORIGIN_WHITELIST = (
    'http//:localhost:8000',
)

illustrate

In the test environment, all domains can be allowed to access to avoid CORS problems. In the production environment, the front-end and back-end separation projects should usually be deployed in the same domain. If cross-domain is really required, add the front-end domain name to the whitelist
configuration CORS_ORIGIN_WHITELISTitem In, access from other domains is prohibited.