如何使用axios在請求標頭中發送clientIP

Question

我當前的項目結構是這樣的

- MyApp
  - client
  - config
  - server
  - shared
    - src
        myReactApp.jsx
    - services
        api.js
        userService.js

我想在所有請求中將客戶端的IP地址作為標api.js送到API服務器，我正在使用Axios向服務器發出請求，我的api.js文件具有此功能

import axios from 'axios';

export default () =>
  axios.create({
    baseURL: config('apiUrl')
  });

在我的用戶服務中，我這樣調用api.js

import api from './api'
export default {
  fetchUserProfileDetails() {
    return api().get('/user/profile')
  }
}

然后在組件中使用

import UserService from '../userService'

...

componentDidMount () {
  UserService.fetchUserProfileDetails()
  .then(results => {
    // do stuff with the results
  })
}

我想知道的是，當我進行這種設置時，如何在每個請求中發送客戶端的IP地址。應用程序是基於響應的，也是使用express作為服務器的服務器端渲染，我可以使用以下方式獲取客戶端的IP： req.connection.socket.remoteAddress.split(",")[0] ，也可以將其發送到react應用程序。

如何在axios中實際使用它？

我正在使用React的上下文API在React應用程序內部發送IP，這是從服務器向React應用程序發送信息的正確方法嗎？

Answer 1

如果您已經在代碼上獲得了客戶端的IP，則可以設置Axios的默認標頭，就像axios.defaults.headers.common['CLIENT_IP'] = clientIP 。

如果您沒有客戶端IP，則可以使用其他帶有某些代碼的第三方應用程序來獲得。 只需看看這篇文章https://ourcodeworld.com/articles/read/257/how-to-get-the-client-ip-address-with-javascript-only

但是要獲得它，最好使用您的服務器。 在Express中，它只是req.ip