当前位置:网站首页>跨域问题 什么时候出现跨域问题 如何解决跨域问题
跨域问题 什么时候出现跨域问题 如何解决跨域问题
2022-08-08 20:44:00 【浩展】
跨域问题是什么:
指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制.
什么时候不会触发CORS跨域请求:
“简单请求"不会触发CORS预检请求. 简单请求包括"GET” “HEAD” “POST”
并且还要满足 Content-Type 的值仅限于三种情况:
text/plain , multipart/form-data , application/x-www-form-urlencoded
非简单请求会先发送预检请求 是OPTIONS方法的请求
例如PUT, DELETE, CONNECT, OPTIONS, TRACE, PATCH
同源策略: 是指 协议,域名,端口都要相同,其中有一个不同都会产生跨域问题.
URL | 说明 | 是否允许通信 |
---|---|---|
http://www.a.com/a.js | 同一域名下 | 允许 |
http://www.a.com/ab/a.js http://www.a.com/script/b.js | 同一域名下不同文件夹 | 允许 |
http://www.a.com:8000/a.js http://www.a.com/b.js | 同一域名,不同端口 | 不允许 |
http://www.a.com/a.js https://www.a.com/b.js | 同一域名,不同协议 | 不允许 |
http://www.a.com/a.js http://192.168.0.1/b.js | 域名和域名对应的ip | 不允许 |
http://www.a.com/a.js http://script.a.com/b.js | 主域相同,子域不同 | 不允许 |
http://www.a.com/a.js http://a.com/b.js | 同一域名,不同二级域名 | 不允许 |
http://www.cnblogs.com/a.js http://www.a.com/b.js | 不同域名 | 不允许 |
如何解决跨域?
方法一:
使用nginx部署为同一域
例如
静态请求: 访问http://nginx/xxx 去前端
动态请求: 访问http://nginx/api/xxx 去网关
方法二:
配置服务器响应跨域请求
需要添加响应头
- Access-Control-Allow-Origin: 支持哪些来源的请求跨域
- Access-Control-Allow-Methods: 支持哪些方法跨域
- Access-Control-Allow-Credentials: 跨域请求默认不包含cookie, 设置为true可以包含cookie
- Access-Control-Expose-Headers: 跨域请求暴露的字段
- Access-Control-Max-age: 响应有效时间多少秒
不能每个方法都添加响应头, 所以用filter 在网关服务中统一配置跨域
以下配置就是全放行, 都可以跨域.
@Configuration
public class MyCorsConfiguration {
@Bean
public CorsWebFilter corsWebFilter(){
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration corsConfiguration = new CorsConfiguration();
//1. 配置跨域
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
corsConfiguration.addAllowedOriginPattern("*");
corsConfiguration.setAllowCredentials(true);
source.registerCorsConfiguration("/**", corsConfiguration);
return new CorsWebFilter(source);
}
}
注意引包的时候引入reactive包下的:
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;
边栏推荐
- Gradle简单到使用kotlin编写到常用命令
- 什么是仿射函数?
- 接口测试经典面试题:Session、cookie、token有什么区别?
- Questions about Mac terminal custom commands and Mysql command
- MySQL8 免安装版安装
- 如何用WebSocket打造Web端IM即时通讯聊天
- iMeta | 深圳先进院戴磊组开发可同时提取共存菌株的组成和基因成分谱的菌株分析工具...
- Notes: The difference between laravel, updateOrCreate and updateOrInsert
- Maykel Studio OpenHarmony Device Development Training Notes - Chapter 6 Study Notes
- 解决gradle导包速度慢问题
猜你喜欢
Ansible自动化运维工具(二)playbook剧本
Maykel Studio OpenHarmony Device Development Training Notes - Chapter 6 Study Notes
高数_复习_第3章:一元函数积分学
超人飞来!Flutter 实现满屏的力量感动画!
rk3588使用npu进行模型转换和推理,加速AI应用落地
Gartner:2022年全球半导体收入增长预计将放缓至7%,远低于2021年26.3%
iMeta | 深圳先进院戴磊组开发可同时提取共存菌株的组成和基因成分谱的菌株分析工具...
Bluu海鲜公司推出首批实验室培育的鱼类产品
Float.parseFloat()的作用
新库上线 | CnOpenDataA股上市公司基本信息数据
随机推荐
Kotlin's JSON format parsing
Kotlin学习笔记
矩阵相乘
VSCode 必知必会的 20 个快捷键
学习笔记:2.3 静态链表 循环链表 双向链表
二分查找的坑
nacos作用
第十三届蓝桥杯(Web 应用开发)线上模拟赛【第十题】(RESTful API 开发)
Ansible自动化运维工具(二)playbook剧本
com.alibaba.fastjson.JSONException: default constructor not found. class
Mendix:企业成功执行数字化转型的9个因素
知乎高赞:如果一个程序员工作5年后还没成为大牛,是不是该考虑别的路子了?
JSP第二篇 -----JSP浅聊EL表达式第二篇:EL表达式中的运算符
Kotlin delegate property knowledge points
Yarn 总结(未完待续)
随手记:laravel、updateOrCreate 和 updateOrInsert 的区别
实践篇1:深度学习之----LetNet之tensorflow2的实现
Kotlin reflection
Questions about Mac terminal custom commands and Mysql command
方舟建筑代码指令大全