|
has been blocked by CORS policy: Response to preflight request doesn‘t pass access control check 报错
由于浏览器将CORS请求分为两类：简单请求（simple request）和非简单请求（not-simple-request）。非简单请求 会在正式通信之前，增加一次HTTP请求，称之为预检请求。浏览器会先发起OPTIONS方法到服务器，以获知服务器是否允许该实际请求。
这是在第一次预请求时候没有请求成功，预请求不成功。
第一，先找到后台对应的接口，让后台去检查接口是否有抛出异常但是没有正常捕获。
第二，前端vue中注意点是请求的时候有没有使用content-type:application/json还有qs.string()
作者：最进
链接：https://www.jianshu.com/p/a2fd613a825c
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
CORS支持所有类型的HTTP请求，是跨域HTTP请求的根本解决方案
JSONP只支持GET请求，JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。
不管是Node中间件代理还是nginx反向代理，主要是通过同源策略对服务器不加限制。
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SSO服务</title>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="./login.js"></script>
</head>
<body>
<h3>SSO登录 参数： {"account":"15029200344", "password":"123456", "captcha": "", "captchaType": 0}</h3>
<form id="loginForm">
<div>
用户名：<input id="account" type="text" value="15029200344" size=30 placeholder="输入用户名"/>
密码：<input id="password" type="password" value="123456" placeholder="输入密码"/>
<button id="submit" type="button">登录</button>
</div>
</form>
</body>
</html>
login.js
$(function () {
//给登录按钮绑定单击事件
console.log("---start-----")
var account = $("#account").val().trim();
var password = $("#password").val().trim();
console.log("account:" + account + ", password:" + password)
var token = "";
$("#submit").click(function () {
//2.发送ajax请求，提交表单数据
// $.post("/sso/login"), $("#loginForm").serialize(), function (data){ console.log(data) }
var dataForm = {
"account": account,
"password": password,
"captcha": "",
"captchaType": 0
}
// http://localhost:8101/sso/login
$.ajax({
url: "/sso/login",
type: "post",
headers: {
"Authorization": "Bearer " + token,
"token": token
},
contentType: "application/json;charset=utf-8",
//dataType: "json",
data: JSON.stringify(dataForm),
beforeSend: function(req){
console.log(window.location)
//console.log(req)
},
success: function (rsp) {
//debugger
console.log(JSON.stringify(rsp))
if (rsp.code == 200) {
token = rsp.data.token
//window.location = "/index.html"
}
},
error() {
console.log("error1")
}
});
});
});
参考资料
跨域处理 SpringBoot、SpringMVC、SpringSecurity
https://zszxz.com/article/213
Spring Security拦截器引起Java CORS跨域失败的问题及解决
http://www.cppcns.com/ruanjian/java/409340.html
https://www.jb51.net/article/217619.htm
九种跨域方式实现原理
https://blog.csdn.net/qq_42380656/article/details/96479597
|