Это хорошая практика, чтобы установить baseURL как window.location.origin для развертывания производства / герою? - PullRequest
Новая
       12

Это хорошая практика, чтобы установить baseURL как window.location.origin для развертывания производства / герою?

0 голосов
/ 22 февраля 2019

В настоящее время я использую GridFS для хранения изображений, и единственный способ успешно отобразить их в React - это получить res.config.baseURL и объединить путь api и имя файла изображения.Когда я настраиваю свой baseURL для производства, я использую window.location.origin.Это безопасный метод?Если нет, то есть ли предпочтительный способ настройки baseURL для производства при развертывании приложений на heroku?

api.js 

const axios = require("axios");
let axiosInstance;

if (process.env.NODE_ENV === "production") {
  axiosInstance = axios.create({
    baseURL: window.location.origin + "/"
  });
} else {
  axiosInstance = axios.create({
    baseURL: "http://localhost:8080/"
  });
}

module.exports = axiosInstance;

Реагирующий компонент Пропущен некоторый код для краткости 

import React, { Component } from "react";
import API from "../../utils/api";
import isEmpty from "../../validation/is-empty";

class Images extends Component {
  constructor(props) {
    super(props);
    this.state = {
      images: [],
      baseurl: "",
    };
  }
  componentDidMount() {
    this.getImages();
  }

  getImages = () => {
    API.get(`/api/files/GET/images`)
      .then(res => {
        console.log(res);
        console.log(res.config.baseURL);
        const images = res.data;
        const baseurl = res.config.baseURL;
        this.setState({
          images,
          baseurl,
        });
      })
      .catch(err => console.log(err));
  };
  render() {
    const {
      images,
      baseurl,
    } = this.state;
    let imageList;

    if (!isEmpty(images)) {
      imageList = images.map(i => (
        <div key={i._id} className="col-md-8 shadowed mb-3 mt-3">
          <img
            src={baseurl + "api/files/GET/image/" + i.filename}
            className="img-fluid d-block mx-auto fileImg mt-3 rounded"
            alt={baseurl}
          />
          <div className="col-md-12 text-center pb-3 pt-3">
            <p>
              Path:{" "}
              <span className="text-success">
                {baseurl + "api/files/GET/image/" + i.filename}
              </span>
            </p>
            <button
              className="btn btn-danger"
              onClick={this.deleteFile.bind(this, i._id)}
            >
              Delete
            </button>
          </div>
        </div>
      ));
    }

    return (
      <div className="row">
        {imageList}
      </div>
    );
  }
}

export default Images;
...