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:
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
最佳答案

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

4年前 评论
Epona 4年前
SevDot 4年前
讨论数量: 6
Epona

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

4年前 评论
Epona

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

4年前 评论

是简单请求和复杂请求,其中自定义头就属于复杂请求,会发两次请求,第一次是 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

4年前 评论

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

4年前 评论
Epona 4年前
SevDot 4年前
leo

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

4年前 评论
W-W (楼主) 4年前
arunfung

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

4年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!