网站首页 > 文章精选 正文
浏览器判断是跨域请求会在请求头上添加origin,表示这个请求来源哪里。比如:
Plaintext
GET / HTTP/1.1
Origin: http://localhost:8601
服务器收到请求判断这个Origin是否允许跨域,如果允许则在响应头中说明允许该来源的跨域请求,如下:
Plaintext
Access-Control-Allow-Origin:http://localhost:8601
如果允许任何域名来源的跨域请求,则响应如下:
Plaintext
Access-Control-Allow-Origin:*
解决跨域的方法:
1、JSONP
通过script标签的src属性进行跨域请求,如果服务端要响应内容则首先读取请求参数callback的值,callback是一个回调函数的名称,服务端读取callback的值后将响应内容通过调用callback函数的方式告诉请求方。如下图:
2、添加响应头
服务端在响应头添加
Access-Control-Allow-Origin:
3、通过nginx代理跨域
由于服务端之间没有跨域,浏览器通过nginx去访问跨域地址。
1)浏览器先访问
http://192.168.101.10:8601 nginx提供的地址,进入页面
2)此页面要跨域访问
http://192.168.101.11:8601 ,不能直接跨域访问http://www.baidu.com:8601 ,而是访问nginx的一个同源地址,比如:
http://192.168.101.11:8601/api ,通过
http://192.168.101.11:8601/api 的代理去访问http://www.baidu.com:8601。
这样就实现了跨域访问。
浏览器到
http://192.168.101.11:8601/api 没有跨域
nginx到http://www.baidu.com:8601通过服务端通信,没有跨域。
我们准备使用方案2解决跨域问题。在内容管理的api工程config包下编写GlobalCorsConfig.java,
或直接从课程资料/项目工程下拷贝,
代码如下:
Java
package com.xuecheng.system.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
/**
* @description 跨域过虑器
* @author Mr.M
* @date 2022/9/7 11:04
* @version 1.0
*/
@Configuration
public class GlobalCorsConfig {
/**
* 允许跨域调用的过滤器
*/
@Bean
public CorsFilter corsFilter() {
CorsConfiguration config = new CorsConfiguration();
//允许白名单域名进行跨域调用
config.addAllowedOrigin("*");
//允许跨越发送cookie
config.setAllowCredentials(true);
//放行全部原始头信息
config.addAllowedHeader("*");
//允许所有请求方法跨域调用
config.addAllowedMethod("*");
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", config);
return new CorsFilter(source);
}
}
此配置类实现了跨域过虑器,在响应头添加
Access-Control-Allow-Origin。
重启系统管理服务,前端工程可以正常进入http://localhost:8601,观察浏览器记录,成功解决跨域。
猜你喜欢
- 2025-05-08 100%开源免费的低代码/可视化数据分析、数据展示平台
- 2025-05-08 Spring Boot跨域问题终极解决方案:3种方法根治CORS报错
- 2025-05-08 永久免费内网穿透很简单,一看就明白
- 2025-05-08 Odoo 用户菜单架构解析及创建和管理实战
- 2025-05-08 关于编码的那些事 - URL 编码(编码url是什么意思)
- 2025-05-08 20 个让人惊叹的 JavaScript 单行代码技巧,效率瞬间提升
- 2025-05-08 如何使用java.net.URLConnection发起和处理HTTP请求
- 2025-05-08 崩溃!代码总掉链子?6 个 JavaScript 技巧助你稳操胜券
- 2025-05-08 抓狂!代码总出错?5 个 JavaScript 技巧助你逆风翻盘
- 2025-05-08 前端性能拉胯?这 8 个 JavaScript 技巧让你的代码飞起来!
- 最近发表
-
- 100%开源免费的低代码/可视化数据分析、数据展示平台
- Spring Boot跨域问题终极解决方案:3种方法根治CORS报错
- 永久免费内网穿透很简单,一看就明白
- Odoo 用户菜单架构解析及创建和管理实战
- 关于编码的那些事 - URL 编码(编码url是什么意思)
- 20 个让人惊叹的 JavaScript 单行代码技巧,效率瞬间提升
- 如何使用java.net.URLConnection发起和处理HTTP请求
- 崩溃!代码总掉链子?6 个 JavaScript 技巧助你稳操胜券
- 抓狂!代码总出错?5 个 JavaScript 技巧助你逆风翻盘
- 前端性能拉胯?这 8 个 JavaScript 技巧让你的代码飞起来!
- 标签列表
-
- newcoder (56)
- 字符串的长度是指 (45)
- drawcontours()参数说明 (60)
- unsignedshortint (59)
- postman并发请求 (47)
- python列表删除 (50)
- 左程云什么水平 (56)
- 计算机网络的拓扑结构是指() (45)
- 稳压管的稳压区是工作在什么区 (45)
- 编程题 (64)
- postgresql默认端口 (66)
- 数据库的概念模型独立于 (48)
- 产生系统死锁的原因可能是由于 (51)
- 数据库中只存放视图的 (62)
- 在vi中退出不保存的命令是 (53)
- 哪个命令可以将普通用户转换成超级用户 (49)
- noscript标签的作用 (48)
- 联合利华网申 (49)
- swagger和postman (46)
- 结构化程序设计主要强调 (53)
- 172.1 (57)
- apipostwebsocket (47)
- 唯品会后台 (61)
- 简历助手 (56)
- offshow (61)