axios options请求 产生跨域问题 (check: It does not have HTTP ok status.)

2 篇文章 0 订阅
2 篇文章 0 订阅

报错

报错

错误原因

看着一个 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();
 });

  • 9
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
根据提供的引用内容,这个错误是由于CORS策略导致的。CORS(跨源资源共享)是一种浏览器安全机制,用于限制跨域请求。当前端应用程序尝试从一个域名(源)向另一个域名发送请求时,浏览器会执行CORS检查,以确保目标域名允许该请求。 在你提供的代码中,使用了axios库发送POST请求。为了解决CORS问题,你可以在服务器端进行配置,允许来自特定域名的请求。在TP5框架中,你可以通过添加中间件来实现。 以下是一个示例中间件的代码,用于解决CORS问题: ```php <?php namespace app\middleware; class Cors { public function handle($request, \Closure $next) { $response = $next($request); $response->header('Access-Control-Allow-Origin', 'https://aaa.aaa.com'); // 允许的域名 $response->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); // 允许的请求方法 $response->header('Access-Control-Allow-Headers', 'Content-Type, Authorization'); // 允许的请求头 return $response; } } ``` 然后,在应用的中间件配置文件(app/middleware.php)中注册该中间件: ```php <?php return [ 'cors' => app\middleware\Cors::class, ]; ``` 最后,在需要使用CORS的路由或控制器方法上添加中间件: ```php <?php namespace app\controller; class Index { /** * @route('index') * @middleware('cors') */ public function index() { // 处理请求 } } ``` 通过以上配置,你可以解决CORS问题,并允许来自特定域名的请求通过。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值