axios 添加 headers 以获取请求仅发送选项

Question

所以我的 reactjs 组件有一个简单的 axios 请求：

let config = {headers: {'Authorization': 'Bearer token-value'}};

axios.get(routes.API + '/user', config).then(response => {
    console.debug(response);
}).catch(error => {
    // error
});

后端只是一个简单的 symfony 控制器，它接受 GET 请求并且应该 return 用户数据。

问题是此请求仅发出 OPTIONS 请求。它失败了，因为我的后端函数只应该接受 get。由于方法不允许，它失败了。如果我允许 OPTIONS 请求方法失败，因为授权错误。而且我从不想授权 OPTIONS 因为它会从数据库中获取用户。而且它从不执行 GET 请求。

如果我删除配置 object 并且只保留 url 请求将正常工作并且永远不会发送 OPTIONS 请求，但是我需要 header 来传递我的授权令牌。

我在我的后端 nginx 服务器上启用了这些 header：

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Headers' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

我在这里错过了什么？

Answer 1

这并不是真正的 axios 特定行为，您应该确保您的服务器能够正确处理 CORS。对于 Symfony - 有一个包可以为您完成，当遇到类似问题时我不得不使用它：

https://github.com/nelmio/NelmioCorsBundle

这是一个示例配置：

nelmio_cors:
  defaults:
      allow_credentials: false
      allow_origin: []
      allow_headers: []
      allow_methods: []
      expose_headers: []
      max_age: 0
      hosts: []
      origin_regex: false
      forced_allow_origin_value: ~
  paths:
      '^/api/':
          allow_origin: ['*']
          #Without this the OPTIONS request by axios won't work
          allow_headers: ['Content-Type']
          allow_methods: ['POST', 'PUT', 'GET', 'DELETE']
          max_age: 3600

axios 添加 headers 以获取请求仅发送选项

Axios adding headers to get request only sends options

nginx

symfony

reactjs

axios