axios 的 GET 请求变成 OPTION,请求失败?

对接中移Onenet的一个接口,需要使用 GET 请求并携带一个自定义头,请求如下:

axios.get('http://api.heclouds.com/devices******', {
        headers: {
          'api-key': '2w4*****y5Y='
        }
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
    });

结果只能看到一个 OPTION(405:Not allowed) 请求。

axios 的 GET 请求变成 OPTION,请求失败?

但是通过接口调试工具是可以正常访问的。看到别人说的一些关于简单跨域和复杂跨域的概念,但是还是不清楚该如何处理,请问这种情况该怎么办?

:computer: & :coffee:
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
最佳答案

@Epona @sevdot 是给合工大的朋友做的一个简单的页面,他们把物联网的数据上传到中国移动OneNet平台,然后我请求OneNet平台的接口拿数据,文档里只有接口地址和这个 Header 头 :joy:

6个月前 评论
Epona 6个月前
SevDot 6个月前
讨论数量: 6
Epona

跨域了,需要在服务端处理一下的。

6个月前 评论
Epona

哦,这个是第三方接口么? 对照文档处理一下,看看哪里没设置好? or 联系一下对方😂

6个月前 评论

是简单请求和复杂请求,其中自定义头就属于复杂请求,会发两次请求,第一次是 OPTION 请求,如果后端返回 200 表示验证通过,然后才发真实的 GET 请求。要解决需要后端支持的,比如 laravel 框架可以用一个 CorsMiddleware 中间,代码如下:

 header("Access-Control-Allow-Origin: *");
 $headers = [
       'Access-Control-Allow-Methods'=> 'POST, GET, PATCH, OPTIONS, PUT, DELETE',
       'Access-Control-Allow-Headers'=> 'Content-Type, X-Auth-Token, Origin, api-key'
 ];
 if($request->getMethod() == "OPTIONS") {
       return response()->make('OK', 200, $headers);
 }
 $response = $next($request);
 foreach($headers as $key => $value){
       $response->header($key, $value);
 }
 return $response;

重要的是 Access-Control-Allow-Headers 里面要包含 api-key

6个月前 评论

@Epona @sevdot 是给合工大的朋友做的一个简单的页面,他们把物联网的数据上传到中国移动OneNet平台,然后我请求OneNet平台的接口拿数据,文档里只有接口地址和这个 Header 头 :joy:

6个月前 评论
Epona 6个月前
SevDot 6个月前
leo

正常操作这个 API 应该是在后端调用的,在后端调用就没有跨域的问题。而且放在前端调用还会泄露 API key,不安全。

6个月前 评论
Kevinvinvin (楼主) 6个月前
arunfung

按理来说应该走一层代理,这样整个程序可控,兼容问题服务端解决。避免前端过度的写数据交互逻辑,复杂度会大大增加,如果后续APP对接,一旦第三方接口变动,主动性就没法自己控制了

6个月前 评论

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!