当前位置: 首页 > news >正文

跨域问题的三种解决办法

我们平时对于前后端联调的项目,以下的错误是经常常见的,我们查看浏览器报错: 

Access to XMLHttpRequest at 'http://localhost:63110/system/dictionary/all' fromorigin 'http://localhost:8601' 
has been blocked by CORS policy: No 'AccessControl-Allow-Origin' header is present on the requested resource.

提示:从http://localhost:8601访问http://localhost:63110/system/dictionary/all被CORS policy阻止,因为没有Access-Control-Allow-Origin 头信息。CORS全称是 cross origin resource share 表示跨域资源共享。

出这个提示的原因是基于浏览器的同源策略,去判断是否跨域请求,同源策略是浏览器的一种安全机制,从一个地址请求另一个地址,如果协议、主机、端口三者则不是跨域,否则就是跨域请求。

比如:

从http://localhost:8601 到 http://localhost:8602 由于端口不同,是跨域。

从http://192.168.101.10:8601 到 http://192.168.101.11:8601 由于主机不同,是跨域。

从http://192.168.101.10:8601 到 https://192.168.101.11:8601 由于协议不同,是跨域。

注意:服务器之间不存在跨域请求。

浏览器判断是跨域请求会在请求头上添加origin,表示这个请求来源哪里。比如:

GET / HTTP/1.1
Origin: http://localhost:8601

服务器收到请求判断这个Origin判断是否允许跨域,如果允许则在响应头中说明允许该来源的跨域请求,如下:

Access-Control-Allow-Origin:http://localhost:8601

如果允许域名来源的跨域请求,则响应如下:

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通过服务端通信,没有跨域。

实现:spring提供了一个CorsFilter类

/* 允许跨域调用的过滤器*/
@Bean
public CorsFilter corsFilter() {CorsConfiguration config = new CorsConfiguration();//允许白名单域名进行跨域调用config.addAllowedOrigin("*");//允许跨越发送iecookieconfig.setAllowCredentials(true);//放行全部原始头信息config.addAllowedHeader("*");//允许所有请求方法跨域调用,比如post,Get,多个方法中间用逗号调用config.addAllowedMethod("*");UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**", config);return new CorsFilter(source);
}
http://www.lryc.cn/news/12698.html

相关文章:

  • c++提高篇——string容器
  • [软件工程导论(第六版)]第6章 详细设计(复习笔记)
  • RabbitMQ核心内容:实战教程(java)
  • RK356x U-Boot研究所(命令篇)3.7 pci与nvme命令的用法
  • 微信头像昵称获取能力的变化导致了我半年没更新小程序
  • 【深度学习编译器系列】1. 为什么需要深度学习编译器?
  • 数据结构与算法总结整理(超级全的哦!)
  • DPDK — MALLOC 堆内存管理组件
  • 分享113个HTML艺术时尚模板,总有一款适合您
  • 2023年美赛C题Wordle预测问题一建模及Python代码详细讲解
  • 小米12s ultra,索尼xperia1 iv,数码相机 拍照对比
  • C++笔记 模板的进阶知识
  • 基于 Debain11 构建 asp.net core 6.x 的基础运行时镜像
  • 【无人机路径规划】基于IRM和RRTstar进行无人机路径规划(Matlab代码实现)
  • Spring Boot中使用@Autowire装配接口是怎么回事?
  • 23种设计模式介绍(Python示例讲解)
  • 初识Hadoop,走进大数据世界
  • 加油站会员管理小程序实战开发教程14 会员充值
  • leetcode 1792. 最大平均通过率
  • 15-基础加强-2-xml(约束)枚举注解
  • 13:高级篇 - CTK 事件管理机制(signal/slot)
  • 群晖-第1章-IPV6的DDNS
  • centos7系统-kubeadm安装k8s集群(v1.26版本)亲测有效,解决各种坑可供参考
  • 帮助指令 man ,help及文档常用管理指令
  • 电子科技大学操作系统期末复习笔记(五):文件管理
  • SpringBoot+ActiveMQ-发布订阅模式(生产端)
  • Android实例仿真之三
  • 关于MySQL的limit优化
  • Java-Stream流基本使用
  • Liunx(狂神课堂笔记)