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）请求。

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

:computer: & :coffee:

W-W

课程读者 250 声望

Code & Coffee

0 人点赞

从小程序个人账户申请开始，带你一步步进行开发一个微信小程序，直到提交微信控制台上线发布。

从零开始带你一步步开发一个 Go 博客项目，让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。

W-W

课程读者 250 声望

最佳答案

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

4年前评论

Epona

他们那边需要处理一下跨域问题，如果不在一个域名下，就会有这个问题

SevDot

如果是第三方的接口，那么要求人家处理跨越问题有点困难，你可以直接写后端去请求他们的接口，而你前端直接请求你的后端接口，你的后端相当于做了一个转发

讨论数量: 6

Epona

版主 1.8k 声望 / Full Stack Developer @ Poper

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

4年前评论

Epona

版主 1.8k 声望 / Full Stack Developer @ Poper

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

4年前评论

SevDot

课程读者 148 声望

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

W-W

课程读者 250 声望

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

4年前评论

Epona

他们那边需要处理一下跨域问题，如果不在一个域名下，就会有这个问题

SevDot

如果是第三方的接口，那么要求人家处理跨越问题有点困难，你可以直接写后端去请求他们的接口，而你前端直接请求你的后端接口，你的后端相当于做了一个转发

leo

管理员 4.7k 声望 / Engineering Director of Backend @ RightCapital

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

4年前评论

W-W （楼主）

是的，不过他们希望的是目前不要服务器，能在本地运行就行。

arunfung

Laravel 8.x 译者 707 声望 / 基础中台项目负责人 @ 某微电商

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

4年前评论

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

帮助

axios 的 GET 请求变成 OPTION，请求失败？

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

axios 的 GET 请求变成 OPTION，请求失败？

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录