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

为什么即使请求成功,我的no-cors fetch()也不能正常工作?

no-cors fetch() 是一种在浏览器中进行跨域请求的方式,它允许发送跨域请求,但不允许访问响应的内容。当使用 no-cors 模式时,请求的响应只能获取到基本的信息,如状态码和头部信息,而无法获取到响应的正文内容。

即使请求成功,no-cors fetch() 不能正常工作的原因可能有以下几点:

  1. 跨域策略限制:浏览器的同源策略限制了跨域请求的访问权限。即使使用 no-cors 模式,仍然需要目标服务器设置允许跨域请求的响应头(Access-Control-Allow-Origin)为当前域名或允许所有域名(*)。
  2. 请求方法限制:no-cors fetch() 只支持 GET 和 HEAD 请求方法,不支持其他方法(如 POST、PUT、DELETE)。如果使用了不支持的请求方法,即使请求成功,也无法正常工作。
  3. 请求头限制:no-cors fetch() 只允许设置一些基本的请求头,如 Content-Type、Accept、Accept-Language 等,不允许设置自定义的请求头。如果设置了不支持的请求头,浏览器会忽略这些请求头。
  4. 响应类型限制:no-cors fetch() 只支持基本的响应类型,如 basic、cors、error,不支持 opaque 类型的响应。如果响应类型为 opaque,即使请求成功,也无法正常获取响应内容。

综上所述,即使请求成功,no-cors fetch() 也不能正常工作可能是由于跨域策略限制、请求方法限制、请求头限制或响应类型限制等原因导致的。在使用 no-cors fetch() 进行跨域请求时,需要确保目标服务器设置了正确的跨域响应头,并且使用支持的请求方法和请求头,同时注意处理响应类型。

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

相关·内容

Fetch使用

前言 在es6之前我们使用XMLHttpRequest实现异步请求,而在es6又新增了一种HTTP请求方式—-fetch与XMLHttpRequest一样同样能实现异步请求,相比较fetch更胜一筹,下面我们来看一下他们区别...xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status==200){ console.log('请求成功...简单几行代码就实现一个请求并且fetch会自动解析数据,也就是请求是json则转换为js对象,请求是文本还是返回文本,则取决与你调用对应函数如本文使用了response.json()返回json数据...允许跨域,服务器不需要设置如上代码但不能将服务端数据返回 需要注意得是cors不支持application/json let data = {name:'tvf',sex:'dsf'}; fetch...不能返回数据 cors不支持application/json let data = {name:'tvf',sex:'dsf'}; fetch('http://localhost:8080

2.1K10
  • 怎样与 CORS 和 cookie 打交道

    如果你尝试去读取回传物件,还会得到警告。 首先,如果我们按照提示中所说,将 fetch mode 改成 no-cors 会发生什么事呢?...的确,我们把烦人错误信息给处理掉了,但是情况似乎并没有变好。 no-cors并不是灵丹妙药,就算用了这个模式,CORS 不会因此就打开大门,也就是你请求并不会成功发出。...附带身份验证请求 cookie 并不能跨域传递,也就是说不同 origin 来 cookie 没办法互相传递及存取,不然就天下大乱了。...这个情况下,你必须在 XHR 设定 withCredentials 或是 fetch 选项中设置 { credentials: 'include' },因为这也是一个跨域请求,所以必须按照 CORS...那有可能会是以下几种情况: 1.用户禁用了此域 cookie 可能使用者把你加入了黑名单,导致 cookie 无法成功送出 解决方法: 改域 检讨自己为什么被用户封锁 2.用户阻止了所有外部网站cookie

    1.3K30

    vue-d2admin-axios异步请求登录,先对比一下Jquery ajax, Axios, Fetch区别

    开发,XHR本身架构不清晰,已经有了fetch替代方案 JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常不合理(采取个性化打包方案又不能享受CDN服务) 尽管JQuery对我们前端开发工作曾有着...,为什么我们还要花费大力气去学习fetch?...当然,如果新fetch能做同样好,为了不掉队会选择使用fetch。...但是最近在使用fetch时候,遇到了不少问题: fetch是一个低层次API,你可以把它考虑成原生XHR,所以使用起来并不是那么舒服,需要进行封装 例如: 1)fetch只对网络请求报错,对...实现超时控制并不能阻止请求过程继续在后台运行,造成了流量浪费 4)fetch没有办法原生监测请求进度,而XHR可以 PS: fetch具体问题大家可以参考:《fetch没有你想象那么美》《fetch

    2.6K20

    跟我一起探索 HTTP-Fetch API

    它返回一个 Promise,该 Promise 会在服务器使用标头响应后,兑现为该请求 Response——即使服务器响应是 HTTP 错误状态。你可以传一个可选第二个参数 init。...相反,它将正常兑现(ok 状态会被设置为 false),并且只有在网络故障或者有任何阻止请求完成时,才拒绝。...成功 fetch() 检查不仅要包括 promise 被 resolve,还要包括 Response.ok 属性为 true。HTTP 404 状态并不被认为是网络错误。...注意 GET 或 HEAD 方法请求不能包含 body 信息。 mode: 请求模式,如 cors、no-cors 或者 same-origin。...因为我们是在请求一个图片,为了解析正常,我们对响应执行 [Body.blob] 来设置相应 MIME 类型。然后创建一个 Object URL,并元素中把它显示出来。

    22030

    CORS 完全手册之 CORS 详解

    除此之外,跨来源请求预设是不会把cookie 带上去,需要在使用xhr 或是fetch 时候多加一个设定,而后端需要加一个额外header 才行。...于是帮fetch 加上了no-cors mode: fetch('http://localhost:3000' , { mode: 'no-cors' }).then( res => console.log...眼看死线将近,小明鼓起勇气去求助了前辈小华,小华跟他说: 这是当然啊,no-cors是个很容易误导初学者参数,他意思并不是「绕过cors拿到资料」,而是「知道它过不了cors,但我没差,所以不要给我错误不要给我...(res)) 打开了浏览器,发现可以成功拿到选项了,从network tab 里面看到了新增加header: ?...经历过一番波折之后,这个改动总算顺利完成了。现在我们可以成功在前端用AJAX 方式送出表单资料了。

    1.7K31

    webpack fetch 提示错误 No Access-Control-Allow-Origin header is present on the requested resource.

    图片 Fetch API cannot load http://v.juhe.cn/toutiao/index?type=&key=9ac9a526985bbd20fa150784********....If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with...这个错误困扰了很久,导致无法从网络获取数据,现在很多接口都是 json 或 jsonp 方式,如果不能fetch 或者一些网络请求方法,简直太受罪了,有些朋友解决方法是把数据放到自己服务器上来处理...,这莫名是给自己增加工作量,直到我看到了这篇文章,终于将这个难题解决:http://www.jianshu.com/p/19a6aefca350 根据文章提示,在 webpack 配置文件中,增加了常用一些数据请求地址...: 图片 随后在请求数据时候,根据文章提示将源地址修改为 localhost:8080 便顺利解决了问题。

    36910

    JavaScript中Fetch

    区别 fetch 规范与 jQuery.ajax() 主要有三种方式不同: 1.当接收到一个代表错误 HTTP 状态码时,从 fetch() 返回 Promise 不会被标记为 reject, 即使响应...2.fetch() 不会接受跨域 cookies;你不能使用 fetch() 建立起跨域会话。其他网站 Set-Cookie 头部字段将会被无视。 3.fetch 不会发送 cookies。...Firefox 在 61.0b13 版本中进行了修改) 使用 发送请求或者获取资源,需要使用 WindowOrWorkerGlobalScope.fetch() 方法。...fetch() 必须接受一个参数——资源路径。无论请求成功与否,它都返回一个 Promise 对象,resolve 对应请求 Response。你可以传一个可选第二个参数 init。...注意 GET 或 HEAD 方法请求不能包含 body 信息。 4.mode: 请求模式,如 cors、 no-cors 或者 same-origin。

    1.8K20

    cors跨域探讨

    一条简单跨域请求就完成了: 前端不需要写任何东西。 后台可以不做任何逻辑处理,一律返回Access-Control-Allow-Origin。 全部CORS把关工作都在浏览器端正式执行。...同时,发起跨域请求时候,默认是不带cookie,需要手动开启,后台需要权限允许。...–origin,method,headers,都在服务器响应名单里,正式请求就可以发起了,流程再次回归到简单请求. ---- 为什么会有非简单请求?...所以,浏览器会发起正式请求前,先向发起一次预请求,等到允许后再发正式请求。 ---- 控制CORS 在ES6fetch中,已经可以控制cors开关了。...fetch(url,{ mode: mode}) mode=same-origin,不支持跨域,直接在浏览器端拦截跨域请求 mode=no-cors,不执行跨域协议,即不存在跨域问题,即使有特殊header

    63300

    关闭浏览器触发监听器,向后端发送请求

    现在需求是,多端只可以有一个用户登录,当一个用户关闭浏览器或者关闭标签页时,向后端发送请求删除该用户登录信息,以此来解决用户及时下线目的。...': 'application/json'}, keepalive: true }); }, 可能你观察到了,使用了fetch请求,那是因为axios异步请求在这里不起作用!...同时,fetch请求最大支持** 64KB**请求体,所以注意传参载荷。 同时如果是前后端分离项目,一定加上跨域设置 no-cors。否则部署线上则会出现跨域异常。...4、最后 到这里前端基本就写完了,只要关闭浏览器或者关闭标签页,则会触发这个监听器并发送请求到后端,只要后端收到了这个请求,则证明fetch请求是没有问题。...因为自己是主导后端开发,所以对于window.event过时问题,或者fetch请求问题,还有好多不理解地方,有擅长小伙伴可以在下方留言。

    1.6K10

    Ajax 之战:XMLHttpRequest 与 Fetch API

    头、请求和响应对象 上面简单 fetch() 示例中,使用一个字符串定义 URL 端点,可以传递一个可配置 Request 对象,它提供了有关调用一系列属性: const request = new...但是,Fetch 提供了一个模式属性,可以在第二个参数 init 对象中设置‘no-cors’属性。...' } ); 这将返回一个不能读取但可以被其它 API 使用响应。...: lengthComputable —— 如果进度可以计算,则设置为 true total —— 消息体工作总量或内容长度 loaded —— 到目前为止完成工作或内容数量 Fetch API...catch() 块,这似乎是合乎逻辑,但事实并非如此:Promise 成功地解决了这些响应,只有当网络没有响应或请求被中断时,才会发生拒绝。

    2.2K20

    在 JS 中如何使用 Ajax 来进行请求

    请求,需要两个侦听器来处理请求成功和失败。...2.3 XMLHttpRequest vs Fetch 早期开发人员,已经使用了好多年 XMLHttpRequest来请求数据了。...现代fetch API允许我们发出类似于XMLHttpRequest(XHR)网络请求。 主要区别在于fetch() API使用Promises,它使 API更简单,更简洁,避免了回调地狱。...错误处理 请注意,对于成功响应,我们期望状态代码为200(正常状态),但是即使响应带有错误状态代码(例如404(未找到资源)和500(内部服务器错误)),fetch() API 状态也是 resolved...个人更喜欢使用Axios API而不是fetch() API,原因如下: 为GET 请求提供 axios.get(),为 POST 请求提供 axios.post()等提供不同方法,这样使我们代码更简洁

    8.9K20

    Chrome 重大更新,CORS 增加了两个新请求头?

    大家好,是 ConardLi,今天又来给大家解读浏览器策略了~ 在刚刚发布 Chrome 98 里面,有这样一项更新: Chrome 将在任何对子资源私有网络请求之前开始发送 CORS 预检请求...响应必须携带明确同意即将到来请求特定 CORS 响应标头(比如:Access-Control-Allow-Origin)。...这个请求在 cors 模式以及 no-cors 所有其他模式中请求之前就已经发送了。 如果目标 IP 地址比发起请求网址更私密,私有网络预检请求会针对同源请求发送。...OK Access-Control-Allow-Origin: https://foo.example 怎么知道网站会不会受影响 从 Chrome 98 开始,如上面我们介绍预检请求失败,请求依然会成功...受影响预检请求可以在 Network 面板中查看得到: 如果你想查看一下强制执行预检成功会发生什么,你可以改一下下面的命令行参数(从 Chrome 98 开始): --enable-features

    4.3K20

    Fetch API 教程

    二、Response 对象:处理 HTTP 回应 2.1 Response 对象同步属性 fetch()请求成功以后,得到是一个 Response 对象。它对应服务器 HTTP 回应。...opaque:如果fetch()请求type属性设为no-cors,就会返回这个值,详见请求部分。表示发出是简单跨域请求,类似表单那种跨域请求。...2.2 判断请求是否成功 fetch()发出请求以后,有一个很重要注意点:只有网络错误,或者无法连接时,fetch()才会报错,其他情况都不会报错,而是认为请求成功。...这就是说,即使服务器返回状态码是 4xx 或 5xx,fetch()不会报错(即 Promise 不会变为 rejected状态)。...no-cors请求方法只限于 GET、POST 和 HEAD,并且只能使用有限几个简单标头,不能添加跨域复杂标头,相当于提交表单所能发出请求

    2.8K20

    React Native Fetch封装那点事...

    ,只需传入请求url 1fetch('https://facebook.github.io/react-native/movies.json'); 当然是否请求成功与数据处理,我们还需处理成功与失败回调...请求内容描述类型 Request.integrity: 请求 subresource integrity Request.mode: 请求模式(cors/no-cors/same-origin/...: 请求来源政策(no-referrer) Request.bodyUsed: 声明body是否使用在response中 请求成功之后,使用.then来转换数据,使用最多是Body.json(),当然你可以使用以下几种数据转换类型...而对于不同环境(debug|release)请求方式可能不同。例如:在debug环境中为了方便调试查看请求参数是否正确,我们会使用get来进行请求。...规定是不能有body,所以这里使用了undefined来标识。

    1.5K10
    领券