react-leaflet doesn't show current location by domain

I'm facing with a problem that I can't get my current location by react-leaflet v4.0.1 and react v18.2.0 when the project has been deployed on IIS. I Just can get the current location when node js is running on localhost/register but not on domain example.com/register. maybe its CROS origin problem but I dont know how to handle it by domain name.

it workes well:

but it has problem with domain:

in Map.js

import React, { useEffect, useState } from 'react'
import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'
import L from 'leaflet'

import icon from './constants'

export default function App() {
  function LocationMarker() {
    const [position, setPosition] = useState(null)
    const [bbox, setBbox] = useState([])

    const map = useMap()

    useEffect(() => {
      map.locate().on('locationfound', function (e) {
        setPosition(e.latlng)
        map.flyTo(e.latlng, map.getZoom())

        setBbox(e.bounds.toBBoxString().split(','))
      })
    }, [map])

    return position === null ? null : (
      <Marker position={position} icon={icon}>
        <Popup>
          You are here. <br />
          Map bbox: <br />
          <b>Southwest lng</b>: {bbox[0]} <br />
          <b>Southwest lat</b>: {bbox[1]} <br />
          <b>Northeast lng</b>: {bbox[2]} <br />
          <b>Northeast lat</b>: {bbox[3]}
        </Popup>
      </Marker>
    )
  }

  return (
    
    <MapContainer
      center={[35.1951, 51.6068]}
      zoom={13}
      scrollWheelZoom
      style={{ height: '50vh' }}
    >
      <div style={{ height: '50vh' }}>
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
        <LocationMarker />
        </div>
      </MapContainer>
  )
}