解决前后台分离跨域问题

这个问题,困扰了我几个星期了.直到今天早上(2018/11/6)找了同学过来帮我看看才知道是什么回事.在做ajax请求的的时候只要加上

cache:false,
// 解决一个跨域问题
xhrFields:{
withCredentials:true
},

这段代码就o**k的具体都不知道是什么原因,先写下来吧等理解了再更新.

登录前台模块的全部代码:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>欢迎登录</title>
   <script src="js/jquery-1.12.4.min.js"></script>
   <script src="js/security.js"></script>

   <style>

body{
background:#eeeeee;
}
#form1{
text-align: center;
}
table{
width: 400px;
height: 270px;
border: 1px solid #ccc;
border-radius:15px;
background: white;
text-align: center;
border-collapse:separate; border-spacing:40px;

}
table input{
line-height: 2em;
}
.text1{
color:#337a21;
border: none;
margin-left:50px;
text-decoration: none;
}
a:hover{
color:#5b6059;
text-decoration: underline;
}
   </style>
   <script src="js/jquery-1.9.1.min.js"></script>
   <script>
       function Logon(){

$.ajax({
url: "http://localhost:8080/api/user/pubkey",
type: "post",
dataType: "json",
cache: false,
xhrFields:{
withCredentials:true
},
beforeSend: function() {
},
complete: function() {
},
success: function (result) {
if (result.code == 200) {
var login_form = $("#form1");

var pwd = login_form.find("input[name=password]").val();
var modulus = result.data.modulus;
var exponent = result.data.exponent;

//加密
var key = RSAUtils.getKeyPair(exponent, "", modulus);
var apwd = RSAUtils.encryptedString(key, JSON.stringify({"password":pwd}));

$.ajax({
url: "http://localhost:8080/api/user/login",
type: "post",
data: "mobile_phone=" + login_form.find("input[name=mobile_phone]").val() + "&password=" + apwd,
dataType: "json",
   cache:false,
                           xhrFields:{
                               withCredentials:true
                           },
beforeSend: function() {
},
complete: function() {
},
success: function (result) {
if (result.code == 200) {
window.location.href = "demo.html";
} else {
alert(result.msg);
}
},error: function (result) {
alert("网络连接失败！");
}
});
} else {
alert(result.msg);
}
},error: function (result) {
alert("网络连接失败！");
}
});
}
   </script>
</head>
<body>
   <form action="" id="form1" method="post" enctype="multipart/form-data">

<table cellpadding="5" cellspacing="0" border="0" class="centenTable" align="center">
<caption style=" font-size:25px; margin-top: 20px;">输入您登录的信息</caption>
   <tr>
<td>账号：
<input type="text" id="phone" name="mobile_phone" autocomplete="off" value="13025657208"/>
</td>
</tr>
   <tr>
<td>密码：
<input type="text" id="pow" name="password" autocomplete="off" value="123456"/>
</td>
</tr>
<tr>
<td><input type="button" id="btn" value="登录" onclick="Logon()"/>
<a href="register.html" class="text1">注册</a></td>
</tr>
</table>
   </form>
</body>
</html>

其中用到了两个后台的接口一个是加密的一个登录的具体代码也是搬过来的哈哈

菜鸟一枚,望见谅!!!

解决前后台分离跨域问题

猜你喜欢