NextJS SSR-Axios全局标头(GetServerSideProps)

我有一个在getServerSideProps中使用带有SSR请求(Axios)的NextJS的应用程序。
我想知道是否有一种方法可以拦截Axios SSR请求并全局添加标头：{ "X-FOO": "BAR" }。
我试过(但没有成功)：

export function getServerSideProps(context) {
  context.req.headers['X-FOO'] = "BAR";

  return {
    props: {},
  };
}

如果我直接注入每个AXIOS请求configHeaders，它就能正常工作：

export const getServerSideProps: GetServerSideProps = async(context) => {
  const { req } = context;
  const configHeaders = {
    headers: {
      'X-FOO': `BAR`,
    }
  };
      const data = await axios.create({
        baseURL: BASE_URL,
      }).get(`/path`, configHeaders);

      return {
        props: {
          data,
        },
      };
    }
  }

  return {
    props: {},
  };
};

我想知道是否有一种方法可以全局地向SSR请求添加标头。

这篇文章很有帮助：https://lazypandatech.com/blog/NextJs/50/REST-API-Call-using-Axios-Interceptor-in-React-NextJs/
在这篇文章的基础上，我会试着一步一步地将其分解

任务：全局集成AXIOS
api服务：Rapi-API

我将使用TypeScrip和OOP概念来演示此解决方案……

第一步：

创建一个抽象类，我们将这个类称为“AxiosBaseService”

import axios, { AxiosInstance, AxiosRequestConfig } from "axios";

export abstract class AxiosBaseService {
  protected instance: AxiosInstance;
  protected token?: string;
  protected readonly baseURL: string;

 public constructor(baseURL: string, token?: string) {
   this.baseURL = baseURL;
   this.instance = axios.create({
   baseURL,
 });
 this.token = token;
 this.initializeRequestInterceptor();
}

private initializeRequestInterceptor = () => {
  this.instance.interceptors.request.use(this.handleRequest);
};

private handleRequest = (config: AxiosRequestConfig) => {

  // config.headers!["Authorization"] = `Bearer ${this.token}`;
  config.headers!["Accept-Language"] = "EN";
  config.headers!["X-BingApis-SDK"] = "true";
  config.headers!["X-RapidAPI-Key"] = "secret_key";
  config.headers!["X-RapidAPI-Host"] = "bing-news-search1.p.rapidapi.com";
  return config;
 };
}

第二步：

创建API服务类，然后该类将在继承所有方法和字段(如果有)的过程中扩展抽象类。在我们的例子中，我们所需要的只是构造器。

import { AxiosBaseService } from "./AxiosBaseService";

export class BingNewsService extends AxiosBaseService {
  private static classInstance?: BingNewsService;

  constructor() {
   super("https://bing-news-search1.p.rapidapi.com");
  }

  public static getInstance() {
    if (!this.classInstance) {
      this.classInstance = new BingNewsService();
     }

     return this.classInstance;
  }

 public bingNewsData = () => {
 this.instance
  .get("/news", {
    params: { cc: "us", safeSearch: "on", textFormat: "Raw" },
  })
  .then((response) => {
    if (response) {
      console.log(response.data);
      return response;
    }
  });
 };
}

第三步

调用页面组件(SSR)中的API服务(BingNewsService)类

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const bingNews = BingNewsService.getInstance();
  const res = bingNews.bingNewsData();
  return {
    props: {
      data: res.data,
    },
  };
};

注意*你可能注意到我们没有响应间隔...是为了让事情变得简单。所以我们专注于实际的问题。

现在您可以在全局范围内使用AXIOS标头。更好的是，您始终可以扩展抽象类来配置您需要与AXIOS一起使用的任何API服务。
或者，要查看您的请求数据和更多信息，请执行console.log(Res)，这些数据应该在您的集成终端中，因为请求是应请求完成的，这样它就不会显示在浏览器控制台选项卡上。
我希望这对您有所帮助：)

NextJS SSR-Axios全局标头(GetServerSideProps)

1条答案

相关问题

热门标签

最新问答