vercel 部署后套cf开cdn页面乱码
Closed this issue · 8 comments
套cf之后页面内容直接成乱码了怎么回事,直接显示源码,标签都没事,文字直接锟斤拷了,就下面这样,cdn一关就好了
`
<title>Telegram鍥惧簥</title>
<style>
#uploadButton,
#uploadFileLabel {
display: block;
max-width: 200px; /* 鍥哄畾瀹藉害 /
margin: 0 auto; / 灞呬腑 /
margin-bottom: 10px; / 娣诲姞搴曢儴闂磋窛 */
}
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: #333;
}
.custom-file-input {
display: none;
}
.custom-file-label {
background-color: #007BFF;
color: #fff;
padding: 10px 20px;
cursor: pointer;
}
.custom-file-label:hover {
background-color: #0056b3;
}
#uploadButton {
background-color: #007BFF;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
}
#uploadButton[disabled] {
background-color: #ccc;
cursor: not-allowed;
}
#uploadButton:hover {
background-color: #0056b3;
}
#response {
margin-top: 20px;
padding: 10px;
}
.response-item {
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
}
.response-success {
background-color: #d4edda;
border-color: #c3e6cb;
color: #155724;
}
.response-error {
background-color: #f8d7da;
border-color: #f5c6cb;
color: #721c24;
}
#loading {
display: none;
}
.copy-code{
margin: 5px;
}
.copy-links{
margin-top: 5px;
}
#uploadButton[disabled]:hover {
background-color: #ccc;
cursor: not-allowed;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>涓婁紶鍥剧墖鍒� Telegram</h1>
<label for="uploadFile" id="uploadFileLabel" class="custom-file-label">閫夋嫨鏂囦欢</label>
<input type="file" name="image" id="uploadFile" accept=".jpg, .jpeg, .png" class="custom-file-input">
<button id="uploadButton">涓婁紶</button>
<div id="loading">涓婁紶涓�...</div>
<div id="response" class="ui-widget">
</div>
<script>
// 鐩戝惉绮樿创浜嬩欢
document.addEventListener('paste', function (e) {
var items = e.clipboardData.items;
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (item.type.indexOf('image') !== -1) {
// 鑾峰彇绮樿创鐨勫浘鐗囨枃浠�
var file = item.getAsFile();
// 璋冪敤涓婁紶鍑芥暟锛屽皢file浼犻€掔粰涓婁紶閫昏緫
$('#uploadFileLabel').text("宸查€夋嫨鍓创鏉挎枃浠�").css('background-color', '#0056b3');
uploadImg(file);
}
}
});
$(document).ready(function () {
$('#uploadFile').change(function () {
var fileName = $(this).val().split('\\').pop();
if (fileName) {
$('#uploadFileLabel').text('宸查€夋嫨鏂囦欢: ' + fileName).css('background-color', '#0056b3');
} else {
$('#uploadFileLabel').text('閫夋嫨鏂囦欢').css('background-color', '#007BFF');
}
});
$('#uploadButton').click(function () {
var fileInput = document.getElementById('uploadFile');
var file = fileInput.files[0];
if(file){
uploadImg(file)
}else{
alert('璇烽€夋嫨涓€涓浘鐗囨枃浠�');
}
});
});
function uploadImg(file){
var formData = new FormData();
formData.append('image', file);
// 绂佺敤涓婁紶鎸夐挳骞舵樉绀簂oading
$('#uploadButton').prop('disabled', true);
$('#uploadButton').text('涓婁紶涓�');
$('#loading').show();
var baseUrl = window.location.protocol + "//" + window.location.hostname;
if(window.location.port !== "80" && window.location.port.length>0){
baseUrl = baseUrl + ":" + window.location.port;
}
$.ajax({
type: 'POST',
url: baseUrl+'/api',
data: formData,
contentType: false,
processData: false,
success: function (response) {
if (response.code === 1) {
var imgUrl = baseUrl + response.message;
var newItem = $('<div class="response-item response-success">涓婁紶鎴愬姛锛屽浘鐗囧閾撅細<a target="_blank" href="' + imgUrl + '">' + imgUrl + '</a>' +
'<div class="copy-links">' +
'<span class="copy-code" data-clipboard-text="<img src="' + imgUrl + '" alt="Your Alt Text">">HTML</span>' +
'<span class="copy-code" data-clipboard-text="![Alt Text](' + imgUrl + ')">Markdown</span>' +
'<span class="copy-code" data-clipboard-text="[img]' + imgUrl + '[/img]">BBCode</span>' +
'</div></div>');
$('#response').prepend(newItem); // 灏嗘柊鏁版嵁鏀惧湪鏈€鍓嶉潰
// 娓呴櫎鏂囦欢杈撳叆妗嗙殑鍊�
$('#uploadFile').val('');
$('#uploadFileLabel').text('閫夋嫨鏂囦欢').css('background-color', '#007BFF');
// 娣诲姞澶嶅埗鍔熻兘
$('.copy-code').click(function () {
var textToCopy = $(this).data('clipboard-text');
var tempInput = $('<input>');
$('body').append(tempInput);
tempInput.val(textToCopy).select();
document.execCommand('copy');
tempInput.remove();
// 鏄剧ず澶嶅埗鎴愬姛鏂囨湰
var copyText = $(this);
var originalText = copyText.text();
copyText.text('澶嶅埗鎴愬姛');
setTimeout(function () {
copyText.text(originalText);
}, 1000);
});
} else {
var newItem = $('<div class="response-item response-error">涓婁紶澶辫触,閿欒淇℃伅锛�' + response.message + '</div>');
$('#response').prepend(newItem); // 灏嗘柊鏁版嵁鏀惧湪鏈€鍓嶉潰
}
},
error: function () {
var newItem = $('<div class="response-item response-error">涓婁紶澶辫触</div>');
$('#response').prepend(newItem); // 灏嗘柊鏁版嵁鏀惧湪鏈€鍓嶉潰
},
complete: function () {
// 鍚敤涓婁紶鎸夐挳骞堕殣钘弆oading
$('#uploadButton').prop('disabled', false);
$('#uploadButton').text('涓婁紶');
$('#loading').hide();
}
});
}
</script>
<a href="https://www.csz.net/"><img src="https://www.csz.net/csznet.png"></a>
</body>
</html>
`
cf的证书设置成Full (strict)试一下
cf的证书设置成Full (strict)试一下
呢四个模式全试过了都不行
vercel 绑定自定义域名 自定义域名dns在cloudflare 使用cname指向vercel 流程有没有问题呢,如果流程没错还是有这样的问题,稍晚一点我在项目readme中留一个联系方式,你联系我帮你处理。
域名是托管在cf的,使用cname-china.vercel-dns.com,76.76.21.21,都试过了,流程有没有问题,只要一开云朵就显示源码,关了就正常,SSL四个模式都试过没用。
不过这样也问题不大,vercel的cname-china.vercel-dns.com国内优化的还不错,就是不能用cf的缓存了
联系tg @tgstate123,方便的话帮你看看
联系tg @tgstate123,方便的话帮你看看
大佬
刚搜了下,是个群组,不确定刚加了
bot token或者channel配置错了
@csznet 老哥 CF配置这一块 方便添加点详细内容吗 第一次配置看不太懂... https://www.csz.net/proj/tgstate/
ssl选择static full,其他的设置你可以看到左侧的菜单位置,晚点我详细完善一下。