未设置不记名令牌的授权标头

Question

我在下面登录并进行授权并在会话存储中设置身份验证令牌，然后将其设置在标头中时遇到了这个问题。在我的

axiosConfig.js

的标头中设置它后，我尝试向另一个端点发出 get 请求，但它一直在下面给我这个错误。我已附上 axiosConfig 文件的代码。请任何帮助，我们将不胜感激。

错误截图：

axiosConfig.js

：

import axios from "axios";

let AxiosInstance = axios.create({
  baseURL: {BASE_URL_ON_SEPARATE_SERVER},
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET,POST,OPTIONS,DELETE,PUT",
  },
});

AxiosInstance.interceptors.request.use(function (config) {
  let token = JSON.parse(
    JSON.stringify(window.sessionStorage.getItem("api_key"))
  );
  config.headers["Authorization"] = "Bearer " + token;
  return config;
});

export default AxiosInstance;

Answer 1

虽然

Access-Control-Allow-Origin: "*"

似乎是处理 CORS 问题的好主意，但不允许将

*

与

Access-Control-Allow-Credentials: true

一起使用。浏览器将阻止该请求。

import axios from "axios";
    
let AxiosInstance = axios.create({
  baseURL: {BASE_URL_ON_SEPARATE_SERVER},
  withCredentials: true,
  headers: {
    "Access-Control-Allow-Origin": BASE_URL_ON_MAIN_SERVER,
    "Access-Control-Allow-Methods": "GET,POST,OPTIONS,DELETE,PUT",
  },
});

AxiosInstance.interceptors.request.use(function (config) {
  let token = JSON.parse(
    JSON.stringify(window.sessionStorage.getItem("api_key"))
  );
  if (token) {
    config.headers["Authorization"] = "Bearer " + token;
  }
  return config;
});

export default AxiosInstance;

此代码包含设置为

withCredentials

的

true

属性，确保在 CORS 请求期间发送 Cookie、授权标头和 TLS 客户端证书。