pc网站调用微服务器,【微服务】前后端分离-跨域问题和解决方案
跨域问题存在的原因
跨域问题的根本原因:因为浏览器收到同源策略的限制,当前域名的js只能读取同域下的窗口属性。什么叫做同源策略?就是不同的域名, 不同端口, 不同的协议不允许共享资源的,保障浏览器安全。同源策略是针对浏览器设置的门槛。如果绕过浏览就能实现跨域,所以说早期的跨域都是打着安全路数的擦边球,都可以认为是 hack 处理。这一段是我从别的地方cp过来的,大家将就着看吧。
常用解决方案
JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。
1、JSONP
前端实现: $.ajax({ url: 'http://www.domain2.com:8080/login', type: 'get', dataType: 'jsonp', // 请求方式为jsonp jsonpCallback: "onBack", // 自定义回调函数名 data: {} }); 后端实现(SpringBoot)
@ControllerAdvice(basePackages = "com.zkn.learnspringboot.web.controller") public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice{
public JsonpAdvice() {
super("callback","jsonp");
}
} (1)前端发起请求时候,会加一个参数表示回调的函数 比如 callback=callback124 (callback 参数名也是可以自定义的,和后端协商好就行) 后端返回的数据 callback124({“uid”:1}) (2)参考:前端常见跨域解决方案(全) https://segmentfault.com/a/1190000011145364
(3)JSONP的缺点
JSONP只支持 GET 请求。
(4)原理
JSONP 是通过动态添加标签来调用服务器的脚本(含有src属性,src属性没有跨域限制);而 Ajax 是通过 XHR(XmlHttpRequest) 对象。
2、跨域技术-CORS (CrossOrigin Resources Sharing,跨源资源共享)
CORS是什么?
CORS,是 HTML5 的一项特性,它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。
相对于 JSONP 这种解决方案来说,使用CORS,不需要要求服务器以指定格式返回数据(包装成JS脚本的格式:callback_func({ data }););CORS,只需要在服务器端做一些通用设置。
前端实现:
$.ajax({
type: "post",
url: 'http://192.168.45.152:8081/conference/user/bind',
async: false, // 使用同步方式
// 1 需要使用JSON.stringify 否则格式为 a=2&b=3&now=14...
// 2 需要强制类型转换,否则格式为 {"a":"2","b":"3"}
data: JSON.stringify({
a: 1,
b: '2',
now: new Date().getTime() // 注意不要在此行增加逗号
}),
headers: {
'Authentication':'xxxxxx'
},
contentType: "text/plain",
dataType: "json",
success: function(data) {
console.log(data)
} // 注意不要在此行增加逗号
});
后端实现(SpringBoot):
@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { //设置允许跨域的路径 registry.addMapping("/**") //设置允许跨域请求的域名 .allowedOrigins("*") //是否允许证书 不再默认开启 .allowCredentials(true) //设置允许的方法 .allowedMethods("GET", "POST") //跨域允许时间 .maxAge(3600);
}
} JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。
跨域会话保持
对于前端来说,seesion字段是存在cookie中的。在跨域过程中,Cookie是默认不发送的。就算后端返回set-Cookie字段,前端也不会保存Cookie,更不会在下一次访问的时候发送到后端了。 因此只要前端可以把cookie发送到后端,后端就可以根据cookie拿到seeion字段进行会话验证。 进过重新对CORS的学习,只要通过3步,就可以让会话保持。
1、在ajax中设置,withCredentials: true。 默认情况下,跨源请求不提供凭据(cookie、HTTP认证及客户端SSL证明等)。通过将withCredentials属性设置为true,可以指定某个请求应该发送凭据。
$.ajax({ url: a_cross_domain_url, xhrFields: { withCredentials: true } }); 第二第三步,就是上面的服务端CORS的跨域技术
服务端的 Access-Control-Allow-Credentials: true,代表服务器接受Cookie和HTTP认证信息。
参考资料:
(1)前后端分离-跨域会话如何保持?
(2)Session与Token认证机制 前后端分离下如何登录
(3)理解Cookie和Session机制
pc网站调用微服务器,【微服务】前后端分离-跨域问题和解决方案相关推荐
- 前后端分离跨域问题解决方案
问题 因为最近在学习vue和springboot.用到了前后端分离.前端webpack打包运行的时候会启动nodejs的服务器占用8080端口,后端springboot自带tomcat启动占用1111 ...
- 【python学习笔记】关于python Flask前后端分离跨域问题
关于python Flask前后端分离跨域问题 前后端分离过程中,前后端对接测试难免遇到跨域问题.因为是个新司机,所以在我经过一天的测试,才找到解决办法=-= 第一种方法 from functools ...
- Springboot整合Shiro前后端分离跨域问题
Springboot整合Shiro前后端分离跨域问题 前言:SpringBoot整合shiro进行前后端分离开发时(前端是Vue),项目做了跨域配置,但还是前端请求会出现cros err–显示的跨域问 ...
- nginx处理前后端分离跨域问题
在微服务中,通常会使用前后端分离的方式进行开发和部署.由于前后端分开部署,属于不同的"资源",因此前端调用后端API时可能会出现跨域问题,Cross-Origin Resource ...
- cors 前后端分离跨域问题_前后端分离之CORS跨域访问踩坑总结
前言 前后端分离的开发模式越来越流行,目前绝大多数的公司与项目都采取这种方式来开发,它的好处是前端可以只专注于页面实现,而后端则主要负责接口开发,前后端分工明确,彼此职责分离,不再高度耦合,但是由于这 ...
- cors 前后端分离跨域问题_SpringBoot 实现前后端分离的跨域访问(CORS)
序言:跨域资源共享向来都是热门的需求,使用CORS可以帮助我们快速实现跨域访问,只需在服务端进行授权即可,无需在前端添加额外设置,比传统的JSONP跨域更安全和便捷. 一.基本介绍 简单来说,CORS ...
- 前后端分离跨域问题Access to XMLHttpRequest at ‘http://localhos...has been blocked by CORS policy: No ‘Access-
完整报错如下: Access to XMLHttpRequest at 'http://localhost:8081/login' from origin 'http://localhost:8084 ...
- nginx配置反向代理解决前后端分离跨域问题
2019独角兽企业重金招聘Python工程师标准>>> 摘自<AngularJS深度剖析与最佳实践>P132 nginx配置文件如下: server {listen 80 ...
- 前后端分离 跨域问题解决
跨域的实现原理 http 跨域请求后端服务的时候会在请求头中带上如下信息 Origin: http://api.jijs.com 后端服务器需要在http的响应头中添加以下响应头 Access-Con ...
最新文章
- Python的控制语句1
- 基于深度法向约束的稀疏雷达数据深度补全(商汤科技和香港大学联合提出)
- R语言使用random包生成随机数或者随机字符串实战:randomNumbers函数创建随机整数的数据集(包含重复项)、randomSequence函数创建不含重复项的随机序列数据集、创建随机字符串
- ios视频硬解异常总结,12911总结
- hihocoder 第113周 Fibonacci(动态规划)
- 薏米红豆粥功效及做法介绍
- java调用c的sdk_如何使用java调用c++的sdk动态库 sdk已存在 java方法怎么写? 怎么调用??在线等!!!...
- 【解决】insert 语句无效果,在查询中正常运行问题
- 编译原理——实验叁预习报告——基于YACC的TINY语法分析器的构建
- 随想录(easyx中的键盘输入和鼠标消息)
- Linix中Dockerfile部署Spring Boot项目
- 各国网络安全审查制度及案例分析
- plsqldev连接远程oracle
- Java入门基本数据类型(羊驼)
- java and运算_JAVA中逻辑运算符“|”和“”与“||”和“”的用法
- Placeholder_2:0 is both fed and fetched
- Linux操作系统 df命令
- 激光雷达初体验 - Ubuntu 18.04 + 思岚科技 RPLIDAR A1M8 + ROS 上手使用
- IT男,你应该在任何行业所向披靡
- POI生成Excel