Question

我有一个laravel 5.7项目，该项目将react用于前端和Google地图。我正在尝试将.env变量访问到react组件。使用此代码，我会收到以下错误消息：

Google Maps JavaScript API错误：InvalidKeyMapError

如果我只是将其设置为密钥“ edfefefe”，则我的api密钥正在运行并且google map加载，但是我想要一种更安全的方法...有人可以向我解释我所缺少的内容吗？

PS我已经安装了dotenv

//my .env file
GOOGLE_MAP_KEY=edfefefe

//my react component

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
import './Map.css';

class Map extends Component {
    render() {
    let center = {
    lat: 41.083538,
    lng: 23.558191
    }
        return (
            <div className="map-panel">
        <GoogleMapReact
          bootstrapURLKeys={{ key: process.env.GOOGLE_MAP_KEY }}
          defaultCenter={center}
          zoom={16}
        >
        </GoogleMapReact>
      </div>
        );
    }
}

export default Map;

Answer 1

如果要在前端使用env变量，则必须在其前面加上MIX_。您绝对不希望前端读取所有环境变量。参见https://laravel.com/docs/5.7/mix#environment-variables

此方法实际上并没有任何额外的安全性，它只是使您能够更轻松地在不同环境中交换密钥。

Answer 2

您正在传递无效的密钥，因此来自Google Maps API的无效错误

如何从Laravel访问环境变量以做出反应

2 个答案: