首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当给定'application/json‘的标头时,JS Fetch返回HTML

当给定'application/json'的标头时,JS Fetch返回HTML是因为在发送请求时,使用了错误的标头类型。'application/json'是一种常用的标头类型,用于指示请求的主体内容是JSON格式的数据。而HTML是一种标记语言,用于描述网页的结构和内容。

在JS Fetch中,可以通过设置请求的标头来指定请求的内容类型。如果将'application/json'作为标头类型发送请求,服务器会期望返回JSON格式的数据。如果服务器返回的数据不是有效的JSON格式,或者服务器没有正确处理请求,可能会导致JS Fetch返回HTML。

要解决这个问题,可以检查以下几个方面:

  1. 确保请求的URL和参数正确,以及请求方法(GET、POST等)正确。
  2. 检查服务器端是否正确处理了请求,并返回了正确的数据格式。可以使用其他工具或者浏览器的开发者工具来验证服务器返回的数据是否符合预期。
  3. 确保在发送请求时,设置了正确的标头类型。对于返回HTML的请求,应该使用'Accept: text/html'标头来指示服务器返回HTML格式的数据。

以下是一个示例代码,演示如何在JS Fetch中设置标头类型为'Accept: text/html':

代码语言:txt
复制
fetch(url, {
  headers: {
    'Accept': 'text/html'
  }
})
.then(response => response.text())
.then(data => {
  // 处理返回的HTML数据
})
.catch(error => {
  // 处理错误
});

在腾讯云的产品中,与云计算相关的推荐产品有:

  1. 云服务器(CVM):提供弹性计算能力,可根据业务需求快速创建、部署和管理虚拟服务器实例。产品介绍链接:https://cloud.tencent.com/product/cvm
  2. 云数据库 MySQL 版(CDB):提供稳定可靠的云端数据库服务,支持高可用、灾备、备份和恢复等功能。产品介绍链接:https://cloud.tencent.com/product/cdb
  3. 云存储(COS):提供安全、稳定、低成本的云端存储服务,适用于图片、音视频、文档等各种类型的文件存储和管理。产品介绍链接:https://cloud.tencent.com/product/cos

请注意,以上推荐的产品仅为示例,实际选择产品时应根据具体需求进行评估和选择。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Fetch了解一下呀!

fetch 规范与jQuery.ajax()主要有以下不同: 接收到一个代表错误 HTTP 状态码,从 fetch() 返回Promise不会被标记为 reject,即使响应 HTTP 状态码是...相反,它会将Promise状态标记为 resolve (如果响应 HTTP 状态码不在 200 - 299 范围内,则设置 resolve 返回 ok 属性为 false ),仅网络故障时或请求被阻止...HTTP 回应来说,修改意义不大 Headers.get():根据指定键名,返回键值。 Headers.has():返回一个布尔值,表示是否包含某个。...Headers.entries():返回一个遍历器,可以依次遍历所有键值对([key, value])。 Headers.forEach():依次遍历,每个都会执行一次参数函数。...()请求referer

5K10
  • 跟我一起探索 HTTP-跨源资源共享(CORS)

    ),允许人为设置字段为 Fetch 规范定义对 CORS 安全字段集合 。...如果请求是使用XMLHttpRequest 对象发出,在返回 XMLHttpRequest.upload 对象属性上没有注册任何事件监听器;也就是说,给定一个XMLHttpRequest 实例 xhr...附带身份凭证请求 备注: 发出跨源请求,第三方 cookie 策略仍将适用。无论如何改变本章节中描述服务器和客户端设置,该策略都会强制执行。...HTTP 响应字段 本节列出了服务器为访问控制请求返回 HTTP 响应,这是由跨源资源共享规范定义。上一小节中,我们已经看到了这些字段在实际场景中是如何工作。...请注意,这些字段无须手动设置。开发者使用 XMLHttpRequest 对象发起跨源请求,它们已经被设置就绪。 Origin Origin字段表明预检请求或实际跨源请求源站。

    36430

    对不起,看完这篇HTTP,真的可以吊打面试官

    Web 缓存在其存储中具有请求资源,它将拦截该请求并直接返回资源,而不是到达源服务器重新下载并获取。...对于GET 和 HEAD ,仅服务器没有与给定资源匹配 Etag ,服务器将返回 200 OK作为响应。对于其他方法,仅最终现有资源 Etag 与列出任何值都不匹配,才会处理请求。... GET 和 POST 发送 If-None-Match与 Etag 匹配,服务器会返回 304。...即使此方法有效,文档资源发生改变,它也会添加额外 响应/请求 交换。这会降低性能,并且 HTTP 具有特定来避免这种情况 If-Range。 ?...创建 Cookie 接收到客户端发出 HTTP 请求,服务器可以发送带有响应 Set-Cookie ,Cookie 通常由浏览器存储,然后将 Cookie 与 HTTP 一同向服务器发出请求

    6.4K21

    Fetch还是Axios——哪个更适合HTTP请求?

    如果我们不传递 options,请求总是 GET,它从给定 URL 下载内容。 在选项参数里面,我们可以传递方法或信息,所以如果我们想使用 POST 方法或其他方法,我们必须使用这个可选数组。...fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify...,服务器发回 config,请求配置 request,XMLHttpRequest 对象 现在,让我们看一下带有数据 POST 方法代码示例。...JSON 如前所述,当我们在使用 .fetch() 方法时候,需要对响应数据使用某种方法,当我们在发送带有请求 body ,需要对数据进行字符串化。...console.log(error.request); } else { // Error console.log(error.message); } }); 在上面的代码中,响应良好

    4.9K20

    JavaScript 编程精解 中文第三版 二十一、项目:技能分享网站

    客户稍后再次请求该资源,可以通过包含一个If-None-Match来进行条件请求,该值保存相同字符串。...但服务器不是立即返回 304 响应,它应该停止响应,并且仅有新东西可用,或已经过去了给定时间返回。...HTML 在网络服务器提供文件服务,有一种广为使用约定是:请求直接访问与目录对应路径返回名为index.html文件。我们使用文件服务模块ecstatic就支持这种约定。...请求路径为/,服务器会搜索文件./public/index.html(./public是我们赋予根目录),若文件存在则返回文件。...需要涉及服务器操作使用fetch,将网络请求发送到前面描述 HTTP 接口。 我们使用包装函数fetchOK,它确保服务器返回错误代码,拒绝返回Promise。

    1.2K30

    震惊 | HTTP 在疫情期间把我吓得不敢出门了

    Web 缓存在其存储中具有请求资源,它将拦截该请求并直接返回资源,而不是到达源服务器重新下载并获取。...对于GET 和 HEAD ,仅服务器没有与给定资源匹配 Etag ,服务器将返回 200 OK作为响应。对于其他方法,仅最终现有资源 Etag 与列出任何值都不匹配,才会处理请求。... GET 和 POST 发送 If-None-Match与 Etag 匹配,服务器会返回 304。...即使此方法有效,文档资源发生改变,它也会添加额外 响应/请求 交换。这会降低性能,并且 HTTP 具有特定来避免这种情况 If-Range。...创建 Cookie 接收到客户端发出 HTTP 请求,服务器可以发送带有响应 Set-Cookie ,Cookie 通常由浏览器存储,然后将 Cookie 与 HTTP 一同向服务器发出请求

    5.3K20

    跨域(CORS)产生原因分析与解决方案,这一次彻底搞懂它

    ').pipe(res); }).listen(PORT); server.js 创建 server.js 开启一个服务,根据不同请求返回不同响应。...,没有 “Access-Control-Allow-Origin” 。...一个请求在浏览器端发送出去后,服务端是会收到并且也会处理和响应,只不过浏览器在解析这个请求响应之后,发现不属于浏览器同源策略(地址里面的协议、域名和端口号均相同)也没有包含正确 CORS 响应...例如,如果请求 Content-Type 为 application/json 就会触发 CORS 预检请求,这里也会称为 “非简单请求”。...设置客户端 为 index.html fetch 方法增加一些设置,设置请求方法为 PUT,请求增加一个自定义字段 Test-Cors。

    11.5K93

    react native TypeError network request failed

    如果使用fetch获取数据,用是POST方法,注意headers要添加请求请求为GET不能用body,为POST必须包含body,设置头部之后就一切正常了。...,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;',         'Content-Type' : 'text/plain;charset...PC上怎么请求都正常,但是查看日志,包括在浏览器上Debug JS都发现返回是tomcat 404错误信息,我郁闷了很久,最后发现是PC上配置了host。...而我直接请求,手机上没有配置host,公网没有那个域名请求,导致请求找不到。之后我改成直接通过ip请求,在头部中加上Host信息,这样就可以了。...官网也可以查到:https://facebook.github.io/react-native/docs/network.html#fetch

    2.6K30

    【云函数SCF】浏览器请求函数URL,实现CORS

    fetch/XHR,就出现错误了:Access to fetch xxxxxxxxxxxxx from origin 'http://127.0.0.1:3000" has been blocked...,简单请求看Access-Control-Allow-Origin是否存在发送请求域,非简单请求检查Access-Control-Allow-Headers,Access-Control-Allow-Methods...所以要能让浏览器正常请求,就需要函数返回能够让浏览器通过CORS检查响应。云函数侧解决云函数部分可以通过返回类似下图结构内容,实现自定义参数设置。...主要关注header部分在返回,带上这几个header,即可让浏览器通过CORS这是一个示例,例如我想从https://a.com和https://b.com,给我函数URL发送带有请求token...World" }) }}这时,从浏览器侧调用fetch/XHR云函数URL,就可以正常访问了关于响应更多设置,可参考HTTP 响应字段(MDN)归纳总结出现浏览器CORS报错问题

    30920
    领券