2021-01-14
背景:
同域:域名(父域名和子域名都相同),端口,协议都相同
跨域:非同域的请求
问题:
浏览器上,我们访问127.0.0.1:80,但是127.0.0.1:80 会去请求127.0.0.1:81的数据(比如js文件,ajax请求等),此时80访问81会出现跨域问题,但我们浏览器能直接访问81的数据。
注意:
跨域不是请求发不出去,而是服务端正常返回结果后被浏览器拦截返回结果。(浏览器为了防止非同源的请求 拿到服务器的返回数据结果)
解决办法:
跨域有2种请求,浏览器对于2种请求的处理不一样
简单请求:
请求方法只能是:HEAD,GET,POST
主动设置的头信息不能超过以下字段:Accept,Accept-Language,Content-Language,Last-Event-ID,Content-Type(只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain)
注意:这里的头信息是指我们主动设置的头部信息,在查看请求过程时会发现 浏览器会在头信息里设置Origin等信息,这些不算主动设置的。
非简单请求:不能同时满足简单请求的2个条件
简单请求:
浏览器会在 请求头信息 里增加一个Origin字段,表明本次请求的来源,若服务器返回的头部信息里需包含 Access-Control-Allow-Origin并包含Origin 则浏览器正常返回数据,否则出现跨域错误。
如果需要携带cookie,请求时需设置(比如XMLHttpRequest.withCredentials = true)。若返回头部信息有 Access-Control-Allow-Credentials:true,则浏览器会正常返回数据,否则浏览器会拦截结果报 跨域错误。
注意:服务器会正常返回数据,只是浏览器拦截了结果。
服务器在返回头信息里设置(必须):
Access-Control-Allow-Origin: Origin
Eg:Access-Control-Allow-Origin:127.0.0.1:80
如果想设置匹配所有的Origin且不带cookie的,可以设置:
Access-Control-Allow-Origin: *
如果需要带Cookie,需设置:
Access-Control-Allow-Credentials:true
如果想匹配所有的Origin且带cookie:
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: 请求的Origin(从request获取后填入)
千万不能同时设置Credentials=true且Origin=*,浏览器会报错:
has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute
例如服务器nginx配置案例:
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Origin $http_origin;
非简单请求:
常见的情况是请求方法是PUT 或者 Content-Type字段类型是application/json 或者 头信息里自定义了属性
过程:
此时浏览器将请求分成2步:预检请求 + 简单请求
预检请求:真正请求前增加一次预检(preflight)请求(请求方法是OPTIONS),浏览器进行校验,如果返回状态码是2XX表示验证通过
简单请求:预检通过后,发送简单请求到服务器(浏览器校验Access-Control-Allow-Origin和Origin是否匹配 + Access-Control-Allow-Credentials 和 需要携带Cookie 相匹配 )。
预检校验:
请求方法:OPTIONS
Header里增加:
Access-Control-Request-Headers(若单独设置了header,比如 resource:tom)
Access-Control-Request-Method:GET(例如真正的请求的请求方式是GET)
Origin:请求的域
浏览器通过和Response里的相对应的内容进行对比(例如返回PUT,DELETE,请求的是PUT,则校验通过)
返回的Methods默认是包括 简单请求 里的HEAD,POST,GET请求的(所以返回的里面填入*,也只能匹配到HEAD GET POST,不能匹配PUT等)
返回的Headers默认是包括 简单请求 里的几个字段
千万注意:返回里面设置Methods 或者 Headers为 * 不是代表匹配到任意的内容
注:
预检请求返回时,服务器可以额外配置Access-Control-Max-Age:xxx(单位秒),表示在此时间内请求不再发出另一条预检请求。
例如服务器nginx里配置跨域(针对OPTIONS请求直接返回2XX):
location /file {
if ($request_method = 'OPTIONS') {
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Methods $http_access_control_request_method;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Headers $http_access_control_request_method;
add_header Access-Control-Max-Age 1728000;
return 204;
}
后记:
同源策略是浏览器保护用户的措施,防止第三方网站请求拿到返回的数据(比如cookie和请求的返回结果)。
针对现在前后端分离,一般会在 后端/nginx 设置仅允许 前端的IP/域名 才能跨域请求拿到结果。
nginx里完整的跨域配置:
server {
listen 80 default_server;
server_name _;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Origin $http_origin;
location /file {
if ($request_method = 'OPTIONS') {
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Methods $http_access_control_request_method;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Headers $http_access_control_request_headers;
add_header Access-Control-Max-Age 1728000;
return 204;
}
}
}
Spring里跨域配置:
@Configuration
public class CorsConfig {
@Bean
public CorsFilter corsFilter() {
final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
final CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true); //支持cookie 跨域
config.setAllowedOrigins(Arrays.asList("*"));
config.setAllowedHeaders(Arrays.asList("*"));
config.setAllowedMethods(Arrays.asList("*"));
config.setMaxAge(300L);//设置时间有效
source.registerCorsConfiguration("/**", config);
return new CorsFilter(source);
}
}
注:这里设置AllowCredentials为*没问题,是因为程序里做了处理(在CorsConfiguration类里):
参考:http://www.ruanyifeng.com/blog/2016/04/cors.html
前端跨域测试:https://blog.csdn.net/qq_35720307/article/details/83616682
2021-01-14相关推荐
- 2021.01.14【NOIP提高B组】模拟 总结
2021.01.14[NOIP提高B组]模拟 总结 第一题 Candy 奇奇怪怪的题目. 一开始没有理解题目,其实就是同时变换. 打了一个暴力. 本人随机生成50000组数据,都过了,时间没超.希望出 ...
- 电动力学每日一题 2021/10/14
电动力学每日一题 2021/10/14 (a) Define r∣∣=xx^+yy^\textbf r_{||}=x\hat x+y\hat yr∣∣=xx^+yy^, r∣∣=x2+y2r_{| ...
- PowerBI视觉对象共计271组,2021.01.20日更新
PowerBI视觉对象共计271组,2021.01.20日更新 内容包含导入文件和图标.预览图.文件名一致,在预览图内找到合适的可以直接在视觉对象文件夹搜索 下载地址:点击下载 超便宜 或者复制链接打 ...
- Leetcode刷题 2021.01.22
Leetcode刷题 2021.01.22 Leetcode1042 不邻接植花 Leetcode1010 总持续时间可被 60 整除的歌曲 Leetcode1091 二进制矩阵中的最短路径 Leet ...
- 嬴群的Python程序设计基础学期总结 2021.01.04
Python程序设计基础学期总结 ## 时光像水中的倒影,一晃大一上学期就过去了.昨日那埋怨时间太慢的情愫似乎还游离在脑际,而今大一下学期生活正向我们走来,蓦然回首,感慨颇多.刚迈入大学的时候对一切似 ...
- 01.14第65期短中线黑马推荐!
我花金币弄出来的,分享给大家!个人力量有限,也希望朋友们能够,轮流将买来消息,分享出来.可以贴在评论栏里.或者加qq群:5608766 01.14第65期短中线黑马推荐! http://ike.126 ...
- 2021/01/03 新标日第1课
2021/01/03(2021/01/04补) 今天完成了新标日第一课的学习.回顾自己从五十音图,到浊音半浊音拗音合拗音拨音促音长音,终于完成了入门.继续努力,或许以后失业了可以做日语翻译. 去年秋夜 ...
- 一次挖矿入侵处理记录(2021.01.27)
https://github.com/bg6cq/ITTS/blob/master/security/mine/README.md 转自上面链接,也是我的亲身经历,供大家学习.网络安全大家引以为戒.爱 ...
- 【总结】2021.01.18期末考总结
2021.01.23期末考总结 友链 前言 D a y Day Day - 10 10 10(体育) D a y Day Day - 3 3 3(英语口语) D a y Day Day 0 0 0 D ...
- 在使用计算机时遇到什么样的问题,2021年1-4月雅思口语题库part23:你在使用电脑时遇到的问题...
雅思口语又到了换题季啦,相信你肯定很想知道雅思口语都考哪些题,今天新东方在线小编就给大家整理了2021年1-4月雅思口语题库part2&3:你在使用电脑时遇到的问题,希望能给你的雅思口语备考提 ...
最新文章
- 两个矩形重叠部分面积
- CentOS如何下载安装EPEL源
- Java 线上问题排查神器 Arthas 快速上手与原理浅谈
- win98 老电脑 文件导出_首次装电脑之前何不先模拟一番,这款练手神器可以帮你...
- PAT_B_1003_Java(20分)
- MySQL常见问题的解决,root用户密码忘记,不是内部或外部命令,修改数据库和表的字符编码,命令行客户端的字符集问题
- 帮助孩子学会感恩_页数204_出版日期2015.03_完整版PDF电子书下载
- 树--树的基本性质(JAVA)
- 【ES8(2017)】Object 扩展 values() / entries() / getOwnPropertyDescriptors()
- mysql控制台操作
- matlab机械臂工作空间代码_轻型协作机械臂运动学及工作空间分析
- 项目解析jsx文件_神奇了!这个 Go 语言项目让前端构建快了近 100 倍
- 2015年10月18日-10月24日课程作业(HA Cluster)
- 哈夫曼树【最优二叉树】【Huffman】
- php 调试环境配置
- 如何成功移植cleanflight、INAV到keil开发环境
- 都要2022年了,你还在纠结pytorch还是tensorflow?
- python爬虫获取数据失败请稍后访问_Python爬取微博评论数据,竟被反爬封号了!...
- HDFS BALANCER
- cloudreve 开源私有网盘(带离线下载)
热门文章
- mysql5.5的方言_mysql方言问题
- table类型数据提交_OGG数据同步异常问题总结
- 四十二、开始Vuex的学习:如何在Vue中使用Vuex
- 概率视角下的线性模型:逻辑回归有解析解吗?
- 深度学习在遥感图像目标检测中的应用综述
- v3s 全志_基于全志V3s的开源开发板,提供pcb和系统源码和资料
- 【Java代码】Java版本的NGender根据中文姓名猜测其性别及男性化/女性化程度(Python版本地址+Java版本源码+基础数据)
- linux 内核load addr,linux2.4启动分析(1)---内核启动地址的确定 vmlinux LOAD_ADDR ZRELADDR...
- 简单几步让你实现本地jar包引入到maven当中
- Spring Boot——不同环境调用不同的配置文件解决方案