我想我可以制作一个简单的网页，其中包含带有 URL 地址的文本输入
并使用 XMLHttpRequest 或 Fetch 将任何站点的数据获取到带有 id 的自定义 div 中。
这是我尝试的方法：0
问题是我只能获取一些特定的 URL。
前言：
我们可以设计一个自定义应用程序吗，比如说用 Python，
它将向任何站点发送请求，并从中获取数据，
在这种情况下，我们可以设置任何标头，甚至是 Forbidden 标头？
问题：
禁止标头只是我们浏览器的行为，
但在我们的自定义应用程序或自定义浏览器中，
我们可以默认设置那些禁止的标头吗？
我的代码片段是：
let simplemde = new SimpleMDE({
element: document.getElementById("markdown-latex-preview"),
placeholder: "Type here...",
previewRender: function (plainText, preview) {
preview.innerHTML = marked.parse(plainText);
renderMathInElement(preview, {
delimiters: [
{left: "$$", right: "$$", display: true},
{left: "$", right: "$", display: false},
{left: "\\(", right: "\\)", display: false},
{left: "\\[", right: "\\]", display: true}
],
throwOnError: false
});
return preview.innerHTML;
}
});
// Using old school :)
function loadContent(uri) {
if (uri === "") {
return;
}
let xhr = new XMLHttpRequest();
xhr.open('GET', uri, true);
xhr.onload = function () {
if (simplemde.isPreviewActive()) {
simplemde.togglePreview();
}
let fixit = "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"
simplemde.value(this.responseText.trim() + fixit);
if (!simplemde.isPreviewActive()) {
simplemde.togglePreview();
}
}
xhr.send();
}
let uri = "https://raw.githubusercontent.com/gvitalie/0/main/docs/demo.md";
loadContent(uri);
// Range URI.
document.getElementById("customUriRangeId").oninput = function () {
let uri;
switch (this.value) {
case "-1":
uri = "https://raw.githubusercontent.com/gvitalie/0/main/docs/mama.md";
break;
case "0":
uri = "https://raw.githubusercontent.com/gvitalie/0/main/docs/demo.md";
break;
case "1":
uri = "https://raw.githubusercontent.com/gvitalie/0/main/docs/tata.md";
break;
}
// document.getElementById("demo").innerHTML = uri;
loadContent(uri);
} <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Moirai+One&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"></script>
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col-8 text-center">
<label for="customUriRangeId" class="form-label text-primary"
style="text-align: center; font-family: 'Moirai One'; font-size: 4em;">Absolute Knowledge</label>
<div id="demo"></div>
<input type="range" class="form-range w-25" min="-1" max="1" id="customUriRangeId">
</div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col-8">
<div class="input-group mb-3">
<button type="button" class="btn btn-outline-primary"
onclick="document.getElementById('url-addess').value = 'https://raw.githubusercontent.com/twbs/bootstrap/main/README.md'">
URL:
</button>
<input type="text" class="form-control"
placeholder="Example: https://raw.githubusercontent.com/gvitalie/0/main/README.md"
aria-label="url-address" id="url-addess">
<button type="button" class="btn btn-outline-primary"
onclick="loadContent(document.getElementById('url-addess').value)">Go
</button>
<button type="button" class="btn btn-outline-primary"
onclick="document.getElementById('url-addess').value = 'https://raw.githubusercontent.com/gvitalie/0/main/README.md'">
<i class="fa fa-home" aria-hidden="true"></i></button>
<button type="button" class="btn btn-outline-primary"
onclick="document.getElementById('url-addess').value = ''">Clear
</button>
</div>
</div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col-10">
<textarea id="markdown-latex-preview"></textarea>
</div>
<div class="col"></div>
</div>
</div>是的，禁止的标头仅特定于浏览器。
我们可以从默认情况下对这些标头没有限制的自定义应用程序获取数据。
示例、Python 模块
requestscurl我是如何测试的？
browser-syncme@amadeus:> browser-sync -s "." -f "index.html"requestsme@amadeus:~$ python3 -q
>>> import requests
>>> url = "https://google.com"
>>> def universe(knowledge):
... with open('index.html') as book:
... book.write(knowledge)
...
>>>
>>> response = requests.get(url)
>>> universe(response.text)
>>>
注：
要正常工作，必须始终在默认browser-sync文件中看到body标签。index.html
index.htmlhttps://google.com>>> url = "https://wikipedia.org"
>>> response = requests.get(url)
>>> universe(response.text)
>>>
browser-syncindex.htmlhttps://wikipedia.org结论：
禁止标头是网络浏览器的默认限制。
我们可以构建我们的浏览器版本而没有这样的限制，
与所有其他自定义应用程序一样。
参考书目：