CORS Cross Origin Resource Sharing
CORS/Cross-Origin Resource Sharing/跨域资源共享/HTTP访问控制
解决CORS问题,短期开发阶段方案如下,正常来说还是要设置好白名单和token等等。
python-django (django-cors-headers):
# pip install django-cors-headers
# settings.py
INSTALLED_APPS = (... 'corsheaders', ...)
MIDDLEWARE = [... 'corsheaders.middleware.CorsMiddleware', ...]
CORS_ALLOW_CREDENTIALS = True # 指明在跨域访问中,后端是否支持对cookie的操作
CORS_ORIGIN_ALLOW_ALL = True
# CORS_ORIGIN_WHITELIST = (
# 'http://127.0.0.1:8000',
# 'http://localhost:8000',
# ) # 凡是出现在白名单中的域名,都可以访问后端接口
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
// axios/requests parameters
// config.headers['X-Token'] = getToken()
config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
https://blog.csdn.net/Zhou07182423/article/details/87881484
同协议+同域名+同端口 = 同源
使用额外的HTTP头来通知浏览器让运行在一个origin (domain)上,准许访问来自不同源服务器上的指定的资源
CORS需要浏览器和服务器同时支持,目前浏览器基本都支持该功能(IE>10)
整个CORS通信过程,都是浏览器自动完成,不需要用户参与
对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样
浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉
因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信
A mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin. A web application executes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, or port) from its own.
常见的头信息包括:
Request Headers:
Origin:
Access-Control-Request-Method:
Access-Control-Request-Headers:
Response Headers:
<!-- 1. 允许向该服务器提交请求的URI -->
Access-Control-Allow-Origin: <origin> | *
<!-- 2. 浏览器允许访问的服务器的头信息的白名单 -->
Access-Control-Expose-Headers: ..., ...
<!-- 3. 请求有效期(单位:秒): -->
Access-Control-Max-Age: <seconds>
<!-- 4. 允许的请求方法: -->
Access-Control-Allow-Methods
<!-- 5. 实际的请求中,可以使用的自定义HTTP请求头 -->
Access-Control-Allow-Headers
<!-- 6. 告知客户端,当请求XHR的withCredientials属性是true的时候,响应是否可以被得到。 -->
<!-- 从而使得下一次请求时,上一次的Cookies可以随着请求发送。 -->
Access-Control-Allow-Credentials:
Access-Control-Allow-Origin 方案支持两种: 1) 简单的请求(不支持Put,Delete): Request header包含:Origin: http://test.nuomi.com Response header包含:Access-Control-Allow-Origin: http://test.nuomi.com 2) Preflight方式的请求: 代码中虽然请求一次,但是实际会请求两次:第一次发送OPTION方法,询问对方是否支持我方某种请求方式 如果第一次进过允许,那么发送第二次请求;否则第二次不再发送; 第一次请求: Request header包括:Origin,Access-Control-Request-Method,Access-Control-Request-Headers(optional), Request header包括:Access-Control-Allow-Origin,Access-Control-Allow-Methods,Access-Control-Allow-Headers 第二次请求: 直接用代码中的方法发送(PUT、DELETE),然后得到结果;
<!-- request -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js"></script>
<script>
axios
.get('http://127.0.0.1:8000')
.then(response => console.log(response['data']))
.catch((e) => { console.log('Fail to load'); });
</script>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 持续代码质量管理-SonarQube-7.3部署
- 攻击Scrapyd爬虫
- 【webpack】从vue-cli 2x 到 3x 迁移与实践
- 前端单元测试那些事
- 前端Nginx那些事
- 前端运维部署那些事
- 《前端那些事》从0到1开发简单脚手架
- CDH7.1.1启用Kerberos
- 持续代码质量管理-SonarQube Scanner部署 2.1. 软件安装2.2. 配置修改
- 《前端那些事》聊聊前端的按需加载
- 直播带货系统,滚动视图,上滑隐藏,下滑显示
- 持续代码质量管理-SonarQube-7.3简单使用 2.1. 查看配置2.2. 质量检测2.3. 浏览器查看
- 安装指定版本的docker服务
- 你学BFF和Serverless了吗
- 如何使用Java连接Kerberos的Phoenix