Как включить геолокацию на Chrome при запуске проекта с create-реагировать-приложение (npm запуск)?

Question

Я запустил проект с помощью create-реагировать на приложение, и я в реальном времени просматривал его на локальном хосте, запустив 'npm start'. Так как он не обслуживается по протоколу http, Chrome не позволит геолокации работать.

Как люди обычно go решают эту проблему и тестируют функции, связанные с геолокацией?

Answer 1

правильный способ сделать это - запустить приложение с https=true npm start в соответствии с документами create-реагировать на приложение.

Answer 2

Справочная информация -

Мой второй (2) ответ абсолютно предоставит вам доступ к вашему приложению через https.

Я не совсем уверен что вы пытаетесь выполнить sh или что блокирует вас, но я думаю, что могу дать вам то, что вам нужно, в одном из двух ответов.

Решения -

Ответ 1. Если вы просто хотите, чтобы браузер отображал ваше местоположение, он будет работать при бесплатной sh установке create-react-app.

npm i -g create-react-app
create-react-app geo
cd geo
npm i 
npm i --save react-geolocation 
npm start

Создать имена файлов Geolocation.js

import React from "react";
import { geolocated } from "react-geolocated";

class Demo extends React.Component {
    render() {
        return !this.props.isGeolocationAvailable ? (
            <div>Your browser does not support Geolocation</div>
        ) : !this.props.isGeolocationEnabled ? (
            <div>Geolocation is not enabled</div>
        ) : this.props.coords ? (
            <table>
                <tbody>
                    <tr>
                        <td>latitude</td>
                        <td>{this.props.coords.latitude}</td>
                    </tr>
                    <tr>
                        <td>longitude</td>
                        <td>{this.props.coords.longitude}</td>
                    </tr>
                    <tr>
                        <td>altitude</td>
                        <td>{this.props.coords.altitude}</td>
                    </tr>
                    <tr>
                        <td>heading</td>
                        <td>{this.props.coords.heading}</td>
                    </tr>
                    <tr>
                        <td>speed</td>
                        <td>{this.props.coords.speed}</td>
                    </tr>
                </tbody>
            </table>
        ) : (
            <div>Getting the location data&hellip; </div>
        );
    }
}

export default geolocated({
    positionOptions: {
        enableHighAccuracy: false,
    },
    userDecisionTimeout: 5000,
})(Demo);

В приложении. js добавить новый компонент

import Geolocated from './Geolocated';

function App() {
  return (
    <div className="App">   
      <Geolocated />
    </div>
  );
}
export default App;

Ответ 2. Вы можете создать https URL для своего локального приложения в разработке, используя npm библиотеки, такие как ngrok.

Убедитесь, что ваше приложение реагирует на порт 3000 , если вы следуете этот пример. Порт, переданный ngrok, является портом, к которому ngrok создаст безопасный туннель.

npm i -g ngrok
ngrok 3000

ngrok от @ inconshreveable
(Ctrl + C для выхода) Состояние сеанса онлайн
Срок действия сеанса 7 часов, 59 минут
Версия 2.3.35
Регион США (us)
Веб-интерфейс http://127.0.0.1: 4040
Пересылка http://33333.ngrok.io -> http://localhost: 3000 Пересылка https://33333.ngrok.io -> http://localhost: 3000

                                                                                                                  Connections                   ttl     opn     rt1     rt5     p50    

p90
6 1 0,09 0,02 2,90 5,00
HTTP-запросы

---

                                                                                                                  GET /favicon.ico                    200 OK                            

GET / sock js -узел 101 Коммутационные протоколы
GET /static/media/logo.5d5d9eef.svg 200 OK
GET /static/js/main.chunk. js 200 OK
GET /static/js/0.chunk.js 200 OK
GET /static/js/bundle.js 200 OK
GET / 200 OK

В выходных данных вы должны увидеть URL-адрес https, который пересылается вашему приложению на локальный порт 3000, пока вы работаете.

Вот скриншот работы геолокации ...