HOST front and back end separation small operation

"Local test project configuration domain name small operation "

​

    Related articles [Welcome to pay attention to the official account "All the way to the east"] ( CORS handles cross-domain issues ):

CORS cross-domain problem configuration whitelist CORS_ORIGIN_WHITELIST

HOSTS

    The local test domain name must be modified: C:/Windows/System32/driver/etc/host file, for example (note the space in the middle)

127.0.0.1  www.haha.com

If the front and back ends are separated, two things are often required, such as:

127.0.0.1 www.haha.com # Front page

127.0.0.1 www.api.com # backend

    If it is CORS cross-domain processing, assuming it is django's cross-domain processing, assuming that the front-end port is 8080 and the back-end port is 8000, then the simple configuration at this time:

# 允许哪些域名访问Django

ALLOWED_HOSTS = ['127.0.0.1', 'Localhost', 'www.haha.com', 'www.api.com']

​# CORS追加白名单（显然针对的是前端域名）（后端可能自己识别不到自己吗？）CORS_ORIGIN_WHITELIST = (    'http://127.0.0.1:8080',    'http://localhost:8080',    'http://www.haha.com:8080',    'http://www.api.com:8000',)

    [detail] Why do we include the backend domain name here? Obviously, using this domain name to access 127.0.0.1:8000 later will also be recognized as cross-domain, so it also needs to be added to the whitelist.

front-end

    The front-end processing is easier. Generally, we use a host.js file to manage the host domain name in a unified way, which is also easy to modify later. Then use it directly in the js file and import it directly in the html file.

    Take 01 as an example:

// host.jsvar host = 'http://www.haha.com:8080'

{# xxx.html #}<script type="text/javascript" src="js/hosts.js"></script>

Take the axios usage of the js file as an example, it is generally necessary to introduce the host variable, host:host.

// xxx.js/*axios.get('http://127.0.0.1:8000' + '/', {
   
     responseType: 'json'}). then (...)*/axios.get(this.host + '/', {
   
     responseType: 'json'}). then (...)