繁体   English   中英

我可以在 SvelteKit 项目中获取用户的 IP 地址吗?

[英]Can I get the IP address of my users in a SvelteKit project?

我有兴趣在用户首次提交到我的网站时捕获他们的 Inte.net 协议 (IP) 地址。 我的印象是 SvelteKit 提交与其他 node.js 服务器解决方案类似。

我一直在这篇文章中,我只是没有看到像req.headers['x-forwarded-for']req.socket.remoteAddress类的远程请求提交到 SvelteKit 中的 API 服务器。

这是我在请求中看到的内容(通过 API 提交中的控制台日志):

arg1:
    body: (... data ... )
    Headers:
        accept:'*/*'
        accept-encoding:'gzip, deflate'
        accept-language:'en-US,en;q=0.9'
        connection:'keep-alive'
        content-length:'141'
        content-type:'text/plain;charset=UTF-8'
        cookie:'userid=c03efd10-3085-46cb-bacd-9eaeb605426e'
        host:'192.168.1.22:3000'
        origin:'http://192.168.1.22:3000'
        referer:'http://192.168.1.22:3000/learn'
        user-agent:'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36'
    locals:
        userid: '....'
    method: 'POST'
    params: {}
    path: '/api/user_form'
    query: ...
    rawBody: ... 

绝对没有socket['x-forwarded-for']没有 header

请注意,我正在 local.network 上工作。 主机在一台机器上,客户端在同一个网络中的另一台机器上。 其实host=192.168.1.22:3000,client=192.168.1.4

注 2,我正在通过svelte-kit dev --host 0.0.0.0运行程序

我没看到什么? 有没有办法使用 Sveltekit 从 websubmit 获取客户端用户的 IP 地址?

只是让人们知道......现在可以使用event.clientAddress

Sveltekit 中有一张票可能会解决此功能,希望很快https://github.com/sveltejs/kit/pull/3993

以下所有内容均用于生产/构建代码。

> npm run build
> node build

由于 VITE,在开发模式下运行您的应用程序是不同的。


Svelte 适配器收到一个节点请求,其中还包括远程 IP。 IP 可以用这里提到的方法提取。

然而,适配器仅将 Svelte IncomingRequest接口所需的值转发给 Svelte Render。 然后 Svelte 将该接口进一步扩展为Request接口,并包含以下值:

export interface Request<Locals = Record<string, any>, Body = unknown> {
    url: URL;
    method: string;
    headers: RequestHeaders;
    rawBody: RawBody;
    params: Record<string, string>;
    body: ParameterizedBody<Body>;
    locals: Locals;
}

因此,我看到了四种可能的方法来解决这个问题:

  1. 创建一个问题以更新 Svelte IncomingRequest接口以包含远程 IP。 (这也需要更新所有适配器)
  2. 创建您自己的中间件作为应用程序的入口点。 缺点是,您仍然无法在 Svelte handleroutes的任何地方获得远程 IP。 但是,您可以记录 IP 或阻止某些路径。
  3. 在代理后面运行您的应用程序,代理将在请求 header 中填充['x-forwarded-for'] ,如上面的界面所示,header 在您的 Svelte 请求中可用 ZA8CFDE6331BD59EB2AC96F8661
  4. 自行修改 Svelte IncomingRequest接口和 Adapter Middleware。 (这很脏,维护起来很乱)

由于 2. 是最适用的方式,这里有一个关于如何使用polka进行设置的示例 - 您当然也可以使用express或任何其他 HTTP 服务器。

/src/server.js文件,在这种情况下是我们的中间件:

import polka from 'polka'
import { assetsMiddleware, prerenderedMiddleware, kitMiddleware } from '../build/middlewares.js'

const { PORT, DOMAIN } = process.env

polka()
  .use((req, res, next) => {
      console.log(req.socket.remoteAddress);
    next()
  })

  // Load the SvelteKit build
  .use(assetsMiddleware, prerenderedMiddleware, kitMiddleware)

  .listen(PORT)

/svelte.config.js将我们的中间件配置为entryPoint - 使用默认adapter-node的最小示例:

import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-node';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: preprocess(),

    kit: {
        adapter: adapter({ entryPoint: './src/server.js' }),
        target: '#svelte'
    }
};

export default config;

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM