【愚公系列】2022年01月 Django商城项目05-静态资源文件配置和域名配置和跨域问题

2022-01-04 10:19:43 浏览数 (1)

文章目录

  • 一、静态资源文件配置
  • 二、域名配置
  • 三、前后端跨域问题
    • 1.安装django-cors-headers
    • 2.添加应用
    • 3. 添加中间件
    • 4.设置白名单
    • 5.允许访问的域名

一、静态资源文件配置

settings文件加如下代码

代码语言:javascript复制
STATIC_URL = '/static/'
# STATIC_ROOT = posixpath.join(*(BASE_DIR.split(os.path.sep)   ['static']))
#告知系统去哪里 查找静态文件
STATICFILES_DIRS = [
    os.path.join(BASE_DIR,'static'),
]

二、域名配置

编辑文件

代码语言:javascript复制
sudo vim /etc/hosts

将两个域名添加到文件中

代码语言:javascript复制
127.0.0.1   api.xxxx.com
127.0.0.1   www.xxxx2.com

前端xxxx/js目录中,创建host.js文件用以为前端保存后端域名

代码语言:javascript复制
var host = 'http://api.xxxx.com:8000';

在所有需要访问后端接口的前端页面中都引入host.js,使用host变量即可指代后端域名

修改setting.py中的ALLOWED_HOSTS

代码语言:javascript复制
ALLOWED_HOSTS = ['127.0.0.1', 'api.xxxx.com', 'www.xxxx2.com','localhost']
#或者设置 通配域名,允许全部域名
ALLOWED_HOSTS = ['*']

三、前后端跨域问题

来自A服务器的js发起请求B服务器的资源或服务称之为跨域请求 如果前端与后端的数据来自不同的域名,就会形成跨域问题,只要是协议、域名、端口三者其一不同那就会形成跨域,我们可以使用 CORS 来解决后端对跨域访问的支持

1.安装django-cors-headers

代码语言:javascript复制
pip install django-cors-headers

2.添加应用

我们打开项目配置文件,在INSTALLED_APPS列表添加corsheaders

代码语言:javascript复制
INSTALLED_APPS = (
    ...
    # 添加 django-cors-headers 使其可以进行 cors 跨域
    'corsheaders',
    ...
)

3. 添加中间件

我们打开项目配置文件,在MIDDLEWARE 列表添加corsheaders中间件

代码语言:javascript复制
MIDDLEWARE = [
    ...
    # 添加 django-cors-headers 使其可以进行 cors 跨域,放在最上面注册
    'corsheaders.middleware.CorsMiddleware',
]

4.设置白名单

因为从前端发起的请求与后端不一致,我们需要给它设置白名单让它允许访问

我们打开项目配置文件,添加CORS_ORIGIN_WHITELIST 列表如下

代码语言:javascript复制
# CORS跨域请求白名单设置
CORS_ORIGIN_WHITELIST = (
    'http://127.0.0.1:8080',
    'http://localhost:8080',
    'http://www.mysite.site:8080',
)
CORS_ALLOW_CREDENTIALS = True  # 允许携带cookie

5.允许访问的域名

即使设置了白名单,那只是为了解决跨域问题,但如果在ALLOWED_HOSTS 列表没有添加允许访问的域名那也是不行的(就算是不跨域也不行),所以可以在ALLOWED_HOSTS 添加指定的域名或全部域名

我们打开项目配置文件(这里是dev.py),修改ALLOWED_HOSTS 列表如下

代码语言:javascript复制
ALLOWED_HOSTS = ['www.mysite.site']
#或者设置 通配域名,允许全部域名
ALLOWED_HOSTS = ['*']

0 人点赞