前端vue3+后端django+腾讯云服务器windows版上线部署

KK-Greyson

已于 2022-11-13 13:57:52 修改

阅读量1.8k

点赞数 4

分类专栏：前端文章标签： django 前端腾讯云

于 2022-11-13 13:27:05 首次发布

本文链接：https://blog.csdn.net/m0_52041525/article/details/127830296

版权

文章目录

01-首先在本机上解决跨域问题
02-云服务器介绍
03-将项目上线部署到云服务器步骤
04-总结

01-首先在本机上解决跨域问题

方法一 在前端解决：
在vue.config.js中使用devServer
axios中的url 必须遵循相应写法
关于devServer的详细配置 请百度

在这里插入图片描述

问题：上线时（部署在云服务器上），打包vue3 devServer不会被打包，即导致proxy跨域失效。

方法二：
不在前端解决 在后端django解决

1.安装第三方扩展
pip install django-cors-headers

在settings.py文件中进行如下设置

2.添加应用
INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

3.中间件处理,注意放在第一条,会第一时间进行处理
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]

4.配置访问规则或白名单:
# 允许所有域名跨域(优先选择)
CORS_ORIGIN_ALLOW_ALL = True

# 或配置白名单
# CORS_ORIGIN_WHITELIST = (
#     '*'
#     # '127.0.0.1:8000',
#     # 'localhost:8000',
#     # '127.0.0.1:8080',
#     # 'localhost:8080',
#     # 'ads-cms-api.aataotao.com:8000'  #
#     # 'taoduoduo-test.oss-cn-shenzhen.aliyuncs.com:80',  # 线上
#     # '10.0.2.187:8080'  # 本地
# )

5.允许携带cookie
CORS_ALLOW_CREDENTIALS = True

6.使用nginx可能要配置别的
详情请看参考2
但是我的云服务器也用了nginx，并没有配置参考2的内容，也成功了。

参考1
参考2