開発時はfetchできるが、デプロイするとfetchできなくなる

Question

いつもお世話になっております。

初めて、デプロイ、というものに挑戦しています。

react(firebaseに構築)から、express(herokuに構築)を経由して、mongodb(AtlasでAWSに構築)からデータをfetchできずに困っています。

切り分けのための情報として、

Postmanで、herokuのexpressにアクセスするとしっかりとれています。
また、localhostのreactからherokuのexpressにアクセスすることもできています。
firebaseのreactからのみ、herokuのexpressにfetchできていないです。

そこからcors関係が違うのではないかと考え、

app.js @express

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var cors = require("cors");

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var big5db = require('./routes/big5db');
var twitter = require('./routes/twitter');
var cognition = require('./routes/cognition');

var app = express();

app.use(cors());


//Reactからのリクエストを受け取るのに必要
const allowCrossDomain = function(req, res, next) {
  res.header('Access-Control-Allow-Origin', req.headers.origin)
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE')
  res.header(
    'Access-Control-Allow-Headers',
    'Content-Type, Authorization, access_token'
  )

  // intercept OPTIONS method
  if ('OPTIONS' === req.method) {
    res.send(200)
  } else {
    next()
  }
}
app.use(allowCrossDomain)



// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/twitter', twitter);
app.use('/big5db', big5db);
app.use('/cognition', cognition);


// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

のようにしましたが効果は見られませんでした。

safariで開くとエラーメッセージは、

[blocked] The page at https://XXXXXXX.web.app/rio was not allowed to display insecure content from http://localhost:5000/big5db/all.

と出た後に、

XMLHttpRequest cannot load http://localhost:5000/big5db/all due to access control checks.

と出ています。

検索したところ、https通信でないと、ブラウザにはじかれる、とあるのですが、heroku, firebase共にhttpsで通信しております。

XMLHttpRequestすなわちcorsについては、自分では対処したつもりです。
書き方は違うかもしれません。

以上のように、思い当たる節は当たったのですが、いよいよ手詰まりになっています。

どこが原因なのかもわからないため、どのファイルをあげれば良いかもわかっていないので、ご指摘いただければソースをあげます。

ぜひ、お力添え願いたいです。