报错

报错

错误原因

看着一个 CORS 就直接以为是跨域问题,回头一看服务器的跨域是全部配了的呀,所以觉得问题应该不是在后端上;
然后一看前端,一个axios的试探请求,什么数据都么有撒,也正确的呀;
开始怀疑浏览器缓存问题,清理浏览器数据(我次奥。。我收藏的小网址。。。。),然后直接打开无痕模式(调试前端的时候最好打开无痕模式调试)然后还不行。(烦躁)
关机重启,还是不行(鬼火搓)
然后直接百度了三个多小时,全部叫我去配置跨域。。。我tm。。。可能是我蠢,一个都没有成功。
最后还是在思否上面偶然看见一篇小帖子,勉强解决。。。
产生的原因 :是因为在使用axios发送请求的时候,加入了自定义请求头(比如token),然后 axios 就会产生options试探请求。

解决办法

直接响应OPTIONS请求,就是服务器接收到options请求就直接返回一个成功操作。
用 node来举个例子

app.use(async (ctx, next) => {
         ctx.set('Access-Control-Allow-Origin', '*');
         ctx.set('Access-Control-Allow-Credentials', true);
         ctx.set('Access-Control-Allow-Methods', 'GET, POST, DELETE, PUT ,OPTIONS');
         ctx.set('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Authorization'); 
         ctx.header("Content-Type", "application/json;charset=utf-8");
         // 这里的话相当于设置了缓存的有效时间,减少options请求的次数
         // 相当于发送了一次options请求之后,300s 内不需要再发送了
         ctx.set("Access-Control-Max-Age", 300);
      	 if(ctx.request.method === 'OPTIONS'){ // 直接响应数据 (***** 这里是最重要的if ***)
   			 ctx.body = 200
 		 }
         await next();
 });

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐