Django+Vue跨域配置与经验
2024-08-27 12:20:05
一、原理
同源?同源策略?
同源的定义是:两个页面的协议、端口和域名都相同
同源的例子:
不同源的例子:
同源策略SOP(Same origin policy)是一种浏览器约定,它是浏览器最核心也最基本的安全功能,为了防止浏览器受到XSS、CSFR的攻击,浏览器采用了同源策略,用于限制一个源加载的文档或脚本与另一个源的交互。
在我们的项目中,前端的vue和后端的django分别使用不同的端口,因此受到同源策略的限制,在没有跨域配置的初期,无法进行正常通信。
跨域?什么域?
跨域顾名思义就是一个网域向另一个网域发起资源交互,比如我们的前端http://localhost:9528
与后端http://127.0.0.1:8000
由于端口号的不同,处在不同的网域(源),因此进行api请求获取资源自然就是违反同源策略的跨域操作。
后端端口:
前端端口:
二、使用CORS解决跨域问题
跨域资源共享(CORS) 是一种机制,它使用额外的 HTTP 头来告诉浏览器 让运行在一个 源 (网域) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时,资源会发起一个跨域 HTTP 请求。
Django CORS
1)安装django-cors-headers模块
pip install django-cors-headers
2) 在settings.py中配置
- 添加应用
INSTALLED_APPS = [
...
'corsheaders',
...
]
- 添加中间件
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
...
]
- 添加白名单并允许访问白名单
CORS_ORIGIN_WHITELIST = (
'http://127.0.0.1:8000',
'http://localhost:9528', #凡是出现在白名单中的域名,都可以访问后端接口
)
CORS_ALLOW_CREDENTIALS = True # 允许携带cookie
Vue Proxy
在vue.config.js
中配置proxy代理
devServer: {
...
proxy: {
'^/api': {
target: 'http://127.0.0.1:8000',
changeOrigin: true, // 允许跨域
pathRewriter: {
'^/api' : ''
}
}
},
...
},
其中,^/api
表示以"/api"开头的url将会代理到target
对应的网域中,pathRewriter表示将url中的"/api"改写为"",也就是删去。
三、踩坑/经验
在vue.config.js里配置proxy,并修改请求的url后仍无法连接到后端
- 解决:
url
最后忘了'/',导致和后端不匹配,会有404、500等错误- 后端服务未打开或出现其他错误,也会报code为500的错
api
中添加request
,记得修改url
和baseURL
(比如我们使用vue-element-admin,默认是/dev-api,改成空),否则在请求的url中间会多一个/dev-api,取不到数据proxy
中的拼写错误也会导致无法处理跨域,比如"pathRewriter"写成"pathRewrite"
- 解决:
在后来实验中,发现Django的CORS和Vue的proxy只需配置其一,就能实现跨域资源共享
四、参考
- https://zhuanlan.zhihu.com/p/92938309
- https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/server.html#%E5%89%8D%E7%AB%AF%E8%AF%B7%E6%B1%82%E6%B5%81%E7%A8%8B
- https://www.cnblogs.com/rain-chenwei/p/9520240.html
- https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
最新文章
- 实现下来ScrollView放大轮播图
- c# 动态调用.net编写的webservices接口
- iOS - AppRealTest App 真机测试
- Deep learning:四十七(Stochastic Pooling简单理解)
- html与js的取值,赋值
- jquery uploadify 进入页面请求两次问题解决办法。
- 快速理解Docker - 容器级虚拟化解决方案
- android tablelayout 显示图片
- js导出execl兼容ie Chrome Firefox各种主流浏览器(js export execl)
- 支持向量机(SVM)理论总结系列.线性可分(附带R程序案例:用体重和心脏重量来预测一只猫的性别)
- GO开发[一]:golang开发初探
- MySql使用存储过程实现事务的提交或者回滚
- [Swift]LeetCode814. 二叉树剪枝 | Binary Tree Pruning
- 厚着脸皮求领导写了一篇java小白进阶大牛之路!!!
- 腾讯开源极限渲染js模板链接
- 用友时空KSOA功能挖掘之zl_func函数
- zoj 3204 最小生成树,输出字典序最小的解
- oracle 闪回功能详解
- 实验三 敏捷开发与XP实践 实验报告 20135232王玥
- Oracle错误: ORA-01722 无效数字