Railway•10mo ago

Client responses from server are text/html instead of application/json

I've successfully deployed my website but for some reason when my deployed client sends requests to the server it receives the wrong content type despite the content type being explicitly set in the request headers. I know that the server is working as intended because if I access it directly via http then it returns the correct data. For example, on this page https://gaucho-client-production.up.railway.app/dashboards/equipment I make the following request

axios.get("/api/account/equipment-complete/" + import.meta.env.VITE_COMPANY_ID, {
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    credentials: "include"
                  }
            })

axios.get("/api/account/equipment-complete/" + import.meta.env.VITE_COMPANY_ID, {
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    credentials: "include"
                  }
            })

This request should resolve to the following url: https://server-production-81b1.up.railway.app/account/equipment-complete/clpw9jgxd0000ztvheigeqjgf which does return a json object. I say should because when I preview the build for this website locally, I am getting the correct data format. I've been stuck on this issue since yesterday and believe that this is a client side issue due to the get request working properly with the above URL but I can't seem to find the correct information as to where I went wrong. Attached below is the proxy settings and Project ID and I have attached a screenshot of the headers from my browser. vite.config.js

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'

// https://vitejs.dev/config/
export default defineConfig(({command, mode}) => {
  const env = loadEnv(mode, process.cwd(), '')
  return {
    plugins: [react(), tsconfigPaths()],
    server: {
      host: true,
      proxy: {
        "/api":  {
            target:  env.VITE_SERVER_URL,
            rewrite: (path) => path.replace(/^\/api/, env.VITE_SERVER_URL),
          }
      }
    }
  }
})

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'

// https://vitejs.dev/config/
export default defineConfig(({command, mode}) => {
  const env = loadEnv(mode, process.cwd(), '')
  return {
    plugins: [react(), tsconfigPaths()],
    server: {
      host: true,
      proxy: {
        "/api":  {
            target:  env.VITE_SERVER_URL,
            rewrite: (path) => path.replace(/^\/api/, env.VITE_SERVER_URL),
          }
      }
    }
  }
})

Project ID: f02a113a-13ca-459a-bebb-0a4fcdc98e88

Solution:

the better way to do that: https://github.com/whoisderion/gaucho/blob/main/client/src/pages/Dashboards/EquipmentDashboard/EquipmentDashboard.tsx#L29C29-L29C97 change this request (and all similar api requests) to import.meta.env.VITE_SERVER_URL + "/account/equipment-complete/" + import.meta.env.VITE_COMPANY_ID (other request will have different paths, but you get the idea)...

Jump to solution

14 Replies

Percy•10mo ago

Project ID: f02a113a-13ca-459a-bebb-0a4fcdc98e88

Brody•10mo ago

are you able to share the repo?

ulzino•10mo ago

https://github.com/whoisderion/gaucho this specific request: https://github.com/whoisderion/gaucho/tree/main/client/src/pages/Dashboards/EquipmentDashboard

Brody•10mo ago

first off, have i helped you before? you have my nixpacks.toml and Caddyfile in the client folder

ulzino•10mo ago

No I found one of your posts when I ran into issues deploying

Brody•10mo ago

ah sweet, well that saves time doing that okay screenshot of your railway project please, so i know what you got going on https://github.com/whoisderion/gaucho/blob/main/server/package.json#L10 please dont use nodemon as your start command (only use in dev commands) replace nodemon with just node

ulzino•10mo ago

this just links to each component in the repository which I belive follows the isolated monorepo settings

ulzino•10mo ago

okay thanks for letting me know I will change this now

Brody•10mo ago

thats not the issue, but i needed to mention it still yeah youre like 98% of the way there on your Client service, what do you have set for the VITE_SERVER_URL service variable?

ulzino•10mo ago

server-production-81b1.up.railway.app i appreciate it as I'm fairly new to deploying projects

Brody•10mo ago

change it to https://${{Server.RAILWAY_PUBLIC_DOMAIN}} this will dynamically set it to the public url of the Server service https://github.com/whoisderion/gaucho/blob/main/client/vite.config.ts#L12 get rid of this proxy stuff completely, there are better ways to do this

Solution

Brody•10mo ago

ulzino•10mo ago

I had to battle some CORS errors but I got it working :) Thanks Brody! You're awesome and I really appreciate your time

Brody•10mo ago

awsome, glad i could help!!

Gaming

Programming

Client responses from server are text/html instead of application/json