"Projects with front-end and back-end separation will inevitably encounter a typical problem-cross-domain problems."
cross domain
To solve cross-domain problems, we must first know what is cross-domain?
First of all, cross-domain means that there is a difference between the accessed domain name or IP and port, all of which belong to cross-domain. (Note that the request path is not), even if it is tested locally, the port numbers used for front-end and back-end separation will be different. [Those that are not cross-domain, we call it the same origin, and the cross-domain problem essentially stems from the same-origin policy of the browser]
| 127.0.0.1:8080 | 127.0.0.1:8081 | cross domain |
| www.baidu.com:80 | www.qq.com:80 | cross domain |
| 192.168.0.1:80/get | 192.168.0.1:80/index | not cross domain |
In addition, after inquiry, the cross-domain problem is only for the browser, that is, the browser only sends the cross-domain problem.
So what happens to cross domain issues? That is to say, "I can't cross it", the front-end request cannot reach the back-end, and the back-end response cannot return to the front-end. Even so, even if the browser has the same-origin policy, it will still try to request, such as front-end access, the browser will still try to access the back-end.
Solution: Usually there are NGINX and CORS processing, because this article is for Django, it will be easier to choose CORS to solve.
CORS operation
For the sake of security, the browser blocks cross-domain (otherwise it will be troublesome to share cookies). But the browser will still try to initiate the request.
The browser's attempted request can be tested. The vue+django project separated from the front and back end still responds to 200 in the Pycharm console, which means that the browser calls the request, but intercepts it again)
Use the developer tools to see the error:
| CORS police: No 'Access-Control-Allow-Origin' header is present on the requested resource. |
The browser detects whether the response header has Access-Control-Allow-Origin (this header is ok)
The following is the processing scheme of the Django project:
config file (add):
Here it is assumed that the local front-end access is 127.0.0.1:8080
INSTALLED_APPS = [...'corsheaders', # 解决跨域CORS...]MIDDLEWARE = ['corsheaders.middleware.CorsMiddleware', # 最外层的中间件（先解决跨域问题了再走下面的中间件，所以放最前面）...]# 允许哪些域名访问DjangoALLOWED_HOSTS = ['127.0.0.1', 'Localhost']# CORS追加白名单（显然针对的是前端域名）（后端可能自己识别不到自己吗？）CORS_ORIGIN_WHITELIST = ('127.0.0.1:8080','localhost:8080',)CORS_ALLOW_CREDENTIALS =True # 允许携带cookie
Errors may occur when running:
?: (corsheaders.E013) Origin '127.0.0.1:8080' in CORS_ORIGIN_WHITELIST is missing scheme or netlocHINT: Add a scheme (e.g. https://) or netloc (e.g. example.com).?: (corsheaders.E013) Origin 'localhost:8080' in CORS_ORIGIN_WHITELIST is missing scheme or netlocHINT: Add a scheme (e.g. https://) or netloc (e.g. example.com).
Solution: (Just add http:// in front of CORS_ORIGIN_WHITELIST, if you have configured HTTPS, just cut https://)
CORS_ORIGIN_WHITELIST = ('http://127.0.0.1:8080','http://localhost:8080',)
Cross-domain is allowed, and the following information needs to be carried in the returned response header:
-
Access-Control-Allow-Origin: Acceptable domain, which is a specific domain name or * (represents any)
-
Access-Control-Allow-Credentials: Whether to allow cookies, by default, cors will not carry cookies, unless this value is true
-
This OPTIONS is the identity of the attempted request
“
