pro版获取tonken的方式比较麻烦,发现了灵感乌托邦
写的一篇【给兰空图床添加一个后台获取Tonken功能】
借鉴之后发现在我这里用不了,哭死
开始排查问题,先解决token获取的问题,再解决接口url协议头
问题找到了,token获取访问的是http协议头,实际是https的,所以405了
现在只需要把这段获取动态协议头的代码做一下修改就应该可行了
打开/resources/views/common/api.blade.php/
把代码中的
代码
<form id="token" action="{{ request()->getSchemeAndHttpHost() }}/api/v1/tokens" method="POST">
<div class="my-2 text-sm">
<div class="form-group qqlogin" style="display: none;">
<div class="input-group-addon">邮箱</div>
<input type="email" id="email" name="email" value="{{ Auth::user()->email }}">
</div>
<div style="display: inline-flex;position: relative;">
<div class="px-4 py-3 text-right sm:px-6" style="color: #555;background-color: #eee;border: 1px solid #ccc;">密码</div>
<input type="password" id="password" name="password" placeholder="输入你的密码">
<a href="javascript:;" class="button px-4 py-3 sm:px-6" style="color: #fff;background-color: #8abcd1;border-color: #d0dfe6;margin-left:10px;">
<div>点击获取</div>
</a>
</div>
<div class="list-group">
<x-code>
<span style="color:tomato;user-select: none;">token:</span><span id="tokenCode"></span>
</x-code>
</div>
</form>
替换成即可
代码
<form id="token" action="#" method="POST">
<div class="my-2 text-sm">
<div class="form-group qqlogin" style="display: none;">
<div class="input-group-addon">邮箱</div>
<input type="email" id="email" name="email" value="{{ Auth::user()->email }}">
</div>
<div style="display: inline-flex;position: relative;">
<div class="px-4 py-3 text-right sm:px-6" style="color: #555;background-color: #eee;border: 1px solid #ccc;">密码</div>
<input type="password" id="password" name="password" placeholder="输入你的密码">
<a href="javascript:;" class="button px-4 py-3 sm:px-6" style="color: #fff;background-color: #8abcd1;border-color: #d0dfe6;margin-left:10px;" onclick="getToken()">
<div>点击获取</div>
</a>
</div>
<div class="list-group">
<x-code>
<span style="color:tomato;user-select: none;">token:</span><span id="tokenCode"></span>
</x-code>
</div>
</div>
</form>
<script>
function getToken() {
var apiProtocol = window.location.protocol;
var apiHost = window.location.host;
var apiUrl = apiProtocol + "//" + apiHost + "/api/v1/tokens";
document.getElementById("token").action = apiUrl;
// Make the AJAX request to get the token as before
// ... (your existing AJAX code here)
}
</script>
是将表单的 action
属性初始设置为 "#",表示在表单提交之前,它并不会发起任何请求。然后,我们添加一个"点击获取"的链接,将其onclick
属性设置为getToken()
,表示当点击链接时,将调用JavaScript中的 getToken()
函数。
在JavaScript代码中,getToken()
函数会动态获取当前页面的协议头和主机名,并将其拼接到"/api/v1/tokens"后面,形成正确的API URL。然后,通过document.getElementById("token").action
将该URL设置为表单的action
属性,使得在表单提交时,数据将会发送到正确的API端点。
使用这种方式,无论是在HTTP还是HTTPS环境中,表单都能正确地提交到对应的API端点,保障数据的安全传输。同时,这样的实现方式也具有更好的灵活性和独立性。
完整代码
修改后的完整代码
<div>
<p class="text-lg text-gray-700 font-semibold">Tonken获取</p>
<script src="//lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
<form id="token" action="#" method="POST">
<div class="my-2 text-sm">
<div class="form-group qqlogin" style="display: none;">
<div class="input-group-addon">邮箱</div>
<input type="email" id="email" name="email" value="{{ Auth::user()->email }}">
</div>
<div style="display: inline-flex;position: relative;">
<div class="px-4 py-3 text-right sm:px-6" style="color: #555;background-color: #eee;border: 1px solid #ccc;">密码</div>
<input type="password" id="password" name="password" placeholder="输入你的密码">
<a href="javascript:;" class="button px-4 py-3 sm:px-6" style="color: #fff;background-color: #8abcd1;border-color: #d0dfe6;margin-left:10px;" onclick="getToken()">
<div>点击获取</div>
</a>
</div>
<div class="list-group">
<x-code>
<span style="color:tomato;user-select: none;">token:</span><span id="tokenCode"></span>
</x-code>
</div>
</div>
</form>
<script>
function getToken() {
var apiProtocol = window.location.protocol;
var apiHost = window.location.host;
var apiUrl = apiProtocol + "//" + apiHost + "/api/v1/tokens";
document.getElementById("token").action = apiUrl;
// Make the AJAX request to get the token as before
// ... (your existing AJAX code here)
}
</script>
<script>
$(document).ready(function() {
$("#token .button").click(function() {
var url = $("#token").attr("action");
var email = $("#email").val();
var password = $("#password").val();
$.ajax({
type: 'post',
url: url,
data: {
email: email,
password: password
},
success: function(data) {
if (data.status == true) {
$("#tokenCode").html('Bearer ' + data.data.token)
} else {
if (data.message == "password 不能为空。") {
$("#tokenCode").html("密码不能为空!")
} else if (data.message == "The email address or password is incorrect.") {
$("#tokenCode").html("请确认密码是否正确!")
}
}
},
error: function() {
$("#tokenCode").html("请求过于频繁,请稍后再试!")
}
});
});
});
</script>
</div>
搞定
现在再处理一下接口url协议头获取的问题
把/resources/views/common/api.blade.php
7-10行的代码替换即可
<div>
<p class="text-lg text-gray-700 font-semibold">接口URL</p>
<x-code>{{ request()->getSchemeAndHttpHost() }}/api/v1</x-code>
</div>
替换成
<div>
<p class="text-lg text-gray-700 font-semibold">接口URL</p>
<x-code><span id="apiUrl"></span>/api/v1</x-code>
</div>
<script>
var protocol = window.location.protocol;
var host = window.location.host;
var apiUrl = protocol + "//" + host;
document.getElementById("apiUrl").textContent = apiUrl;
</script>
双双搞定!