我的令牌签名无法通过外部 API 和应用程序中的内部请求进行验证

Question

在 Laravel 5.8 / vuejs / vuex / mysql 应用程序中，我使用 jwt-auth 并且当我登录系统（mysql 用户 table 的标准身份验证）我使用方法：

export function setAuthorizationToken(token) {
    axios.defaults.headers.common["Authorization"] = `Bearer ${token}`
}

它工作正常。

接下来我需要重新制作 SignUp/SignIn 以使用外部 API 进行 SignUp/SignIn 操作。所以我的应用程序需要使用外部 API 制作 SignUp/SignIn ，但我也有请求控制我的应用程序 read/write 数据 from/to 我的 sql.

仅对外部 API returns 令牌的登录请求，我将其保存在上面的 setAuthorizationToken 方法中。接下来我需要从这个外部 API 读取用户详细信息并将其保存在 vuex 存储中。我做到了，它工作正常，但问题是我的下一个 axios 请求我的控件从数据库中读取数据触发错误：

Token Signature could not be verified.

我明白为什么，但有办法解决吗？是否可以在需要时将 Bearer 替换为 axios？也许对 axios 进行一些替换以同时使用 axios 和替换？

"laravel/framework": "5.8.*",
"tymon/jwt-auth": "^1.0.0",


"vue": "^2.5.17",
"axios": "^0.18",
"vuex": "^3.1.0"

谢谢！

已修改：

正在搜索有关登录的决定，我希望我在 cookie 中获得令牌 'external_token'

    const headers = {
        'Content-Type': 'application/json',
        'X-Auth-Token': getCookie('external_token'),
        'Access-Control-Allow-Origin' : '*',
        "Access-Control-Allow-Methods": "GET",
    };
    axios.get(user_details_url, headers)
        .then((response) => {
        ...
        })
        .catch((err) =>{
        })

但我在控制台中遇到错误:

Access to XMLHttpRequest at 'http://remoteserver.com/api/user' from origin 'http://local-wiznext.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

其中 remoteserver.com 是带有 API 的远程服务器，http://local-wiznext.com 是我正在开发的本地服务器

在寻找决定时，我发现了几个附加参数可以添加到我的 axios 请求的 header 中：

    const headers = {
        'Content-Type': 'application/json',
        'X-Auth-Token': getCookie('external_token'),
        'Access-Control-Allow-Origin' : '*',
        "Access-Control-Allow-Methods": "GET",
        'crossDomain': true,
       'dataType': 'jsonp',
    };
    // axios.get(url, {headers})

但我遇到了同样的 CORS 错误。如果有办法修复此错误和运行请求？

已修改 # 2 :

我服务器的管理员使用了这个选项 https://support.cloudways.com/enable-cors-headers/ 并启用 CORS headers 并重新启动 debian，但我仍然收到 CORS 错误。有解决问题的想法吗？

Answer 1

我从问题中可以了解到，您有一个外部 API 和内部 API，它们使用不同的标记。因此，您可以在 SignUp/SignIn 之后在 cookie 中设置令牌，而不是在 SignUp/SignIn 之后设置令牌。对于外部令牌，您可以将其命名为 external_token，对于内部令牌，您可以在 cookie 中将其设置为 token。现在，无论何时触发 axios 调用，您都会提前知道 API 是外部的还是内部的，并且基于此您将仅为该 API 调用设置令牌，而不设置默认授权 header.

我的令牌签名无法通过外部 API 和应用程序中的内部请求进行验证

I got Token Signature could not be verified with external API and internal requests in my app

laravel-5

axios

vuex

vuejs2

jwt-auth