Mixed Content HTPPS - HTPP Error.

I have deployed an early version of my project on Railway; at the time of submiting a request (new user sign-up) I encounter this error:

layout-2e190bc2a1c8fba4.js:1 Mixed Content: The page at '

' was loaded over HTTPS, but requested an insecure resource '

'. This request has been blocked; the content must be served over HTTPS.

I have tried to rederict HTPP to HTPPS in my server configuration:

imports*

const app = express();

const PORT = Number(process.env.PORT) || 3000; // Puerto local 3000 para desarrollo

const createContext = ({ req, res }: trpcExpress.CreateExpressContextOptions) => ({

req,

res,

});

export type ExpressContext = inferAsyncReturnType<typeof createContext>;

// MIDDLEWARE FOR HTPPS-HTPP

app.use((req, res, next) => {

if (req.headers['x-forwarded-proto'] !== 'https' && process.env.NODE_ENV === 'production') {

return res.redirect('https://' + req.headers.host + req.url);

}

return next();

});

const start = async () => {

// start server function

};

However, to no avail.

Anyone have an idea to solve the issue. It is much appreciated 🥲

I believe I have, since I can access the app using https:// and http:// when entering the direction on the browser.

I am not quite sure how a deployment service work, but I think Railway generates a SSL certificate for you automatically once you deploy.

Solution:

Add https:// instead of http:// at the 'NEXT_SERVER_URL' (or whatever you may called it)

variable in the deploy settings.