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

举报
愚公搬代码 发表于 2022/01/03 00:29:58 2022/01/03
【摘要】 一、静态资源文件配置settings文件加如下代码STATIC_URL = '/static/'# STATIC_ROOT = posixpath.join(*(BASE_DIR.split(os.path.sep) + ['static']))#告知系统去哪里 查找静态文件STATICFILES_DIRS = [ os.path.join(BASE_DIR,'static'),] ...

一、静态资源文件配置

settings文件加如下代码

STATIC_URL = '/static/'
# STATIC_ROOT = posixpath.join(*(BASE_DIR.split(os.path.sep) + ['static']))
#告知系统去哪里 查找静态文件
STATICFILES_DIRS = [
    os.path.join(BASE_DIR,'static'),
]

二、域名配置

编辑文件

sudo vim /etc/hosts

将两个域名添加到文件中

127.0.0.1   api.xxxx.com
127.0.0.1   www.xxxx2.com

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

var host = 'http://api.xxxx.com:8000';

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

修改setting.py中的ALLOWED_HOSTS

ALLOWED_HOSTS = ['127.0.0.1', 'api.xxxx.com', 'www.xxxx2.com','localhost']
#或者设置 通配域名,允许全部域名
ALLOWED_HOSTS = ['*']

三、前后端跨域问题

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

1.安装django-cors-headers

pip install django-cors-headers

2.添加应用

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

INSTALLED_APPS = (
    ...
    # 添加 django-cors-headers 使其可以进行 cors 跨域
    'corsheaders',
    ...
)

3. 添加中间件

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

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

4.设置白名单

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

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

# 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 列表如下

ALLOWED_HOSTS = ['www.mysite.site']
#或者设置 通配域名,允许全部域名
ALLOWED_HOSTS = ['*']
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200