Javascript 获取 API 以获取 HTML 响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41921805/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
fetch API to get HTML response
提问by Pankaj Phartiyal
I am trying to get a page's HTML using fetch API. Here is my code.
我正在尝试使用 fetch API 获取页面的 HTML。这是我的代码。
var quizUrl = 'http://www.lipsum.com/';
var myHeaders = new Headers();
myHeaders.append('Content-Type', 'text/html');
fetch(quizUrl,{
mode: 'no-cors',
method: 'get',
headers: myHeaders
}).then(function(response) {
response.text().then(function(text) {
console.log(text);
})
}).catch(function(err) {
console.log(err)
});
It returns empty string. Any guesses why it doesn't work?
它返回空字符串。任何猜测为什么它不起作用？
采纳答案by Kaiido
About the Request.mode'no-cors'(from MDN, emphasis mine)
关于（来自 MDN，强调我的）Request.mode'no-cors'
Prevents the method from being anything other than HEAD, GET or POST. If any ServiceWorkers intercept these requests, they may not add or override any headers except for these. In addition, JavaScript may not access any properties of the resulting Response.This ensures that ServiceWorkers do not affect the semantics of the Web and prevents security and privacy issues arising from leaking data across domains.
防止方法不是 HEAD、GET 或 POST。如果任何 ServiceWorker 拦截了这些请求，他们可能不会添加或覆盖除这些之外的任何标头。此外，JavaScript 可能无法访问结果Response 的任何属性。这确保了 ServiceWorkers 不会影响 Web 的语义，并防止跨域泄漏数据引起的安全和隐私问题。
So this will enable the request, but will make the Response as opaque, i.e, you won't be able to get anything from it, except knowing that the target is there.
因此，这将启用请求，但会使 Response 成为opaque，即，除了知道目标在那里之外，您将无法从中获得任何信息。
Since you are trying to fetch a cross-origin domain, nothing much to do than a proxy routing.
由于您正在尝试获取跨域域，因此除了代理路由之外别无他法。
PS : here is a snippet showing you that the request is indeed opaque :
PS：这是一个片段，向您展示该请求确实是不透明的：
var quizUrl = 'http://www.lipsum.com/';
fetch(quizUrl, {
mode: 'no-cors',
method: 'get'
}).then(function(response) {
console.log(response.type)
}).catch(function(err) {
console.log(err) // this won't trigger because there is no actual error
});回答by Danny Sofftie
I guess this might help, use as below:
我想这可能会有所帮助，使用如下：
fetch('/url/to/server')
.then(res => {
return res.text();
})
.then(data => {
$('#container').html(data);
});
And in server side, return content as plain text without setting header content-type.
在服务器端，将内容作为纯文本返回，无需设置标题内容类型。
I used $('#container')to represent the container that you want
the html data to go after retrieving it.
我曾经$('#container')表示您希望检索 html 数据后去的容器。
The difference with fetching json data is using res.json()in place of
res.text()And also, don't append any headers
与获取 json 数据的不同之res.json()处在于使用代替
res.text()而且，不要附加任何标题
