Home
Support Forums

My App failed to redirect to my backend server

Good day, Am getting failed to load resources server responded with status code 400 as error when my netlify app tried to fetch data from my back end server
EMS (competent-yalow-986023.netlify.app)
The server is hosted on another platform

Hi there, @sammyy25 :wave:

Welcome to the Netlify Forums. Sorry to hear you have encountered some difficulties. Can you share your most recent build log as well as your package.json please? Thank you!

Am sorry for the late reply. This is the latest build log

3:49:27 PM: Build ready to start
3:49:30 PM: build-image version: 081db65c3e4ce8423fedb40e7689a87de6f84667
3:49:30 PM: build-image tag: v4.3.1
3:49:30 PM: buildbot version: 1523fa12d6de79e532ed0aff71973c5fbb8e58aa
3:49:30 PM: Fetching cached dependencies
3:49:30 PM: Starting to download cache of 166.9MB
3:49:31 PM: Finished downloading cache in 819.391279ms
3:49:31 PM: Starting to extract cache
3:49:37 PM: Finished extracting cache in 6.509538121s
3:49:38 PM: Finished fetching cache in 7.41400261s
3:49:38 PM: Starting to prepare the repo for build
3:49:38 PM: Preparing Git Reference refs/heads/main
3:49:38 PM: Parsing package.json dependencies
3:49:39 PM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'client/build' versus 'build' in the Netlify UI
3:49:39 PM: Starting build script
3:49:39 PM: Installing dependencies
3:49:39 PM: Python version set to 2.7
3:49:40 PM: Started restoring cached node version
3:49:42 PM: Finished restoring cached node version
3:49:43 PM: v16.10.0 is already installed.
3:49:44 PM: Now using node v16.10.0 (npm v7.24.0)
3:49:44 PM: Started restoring cached build plugins
3:49:44 PM: Finished restoring cached build plugins
3:49:44 PM: Attempting ruby version 2.7.2, read from environment
3:49:45 PM: Using ruby version 2.7.2
3:49:46 PM: Using PHP version 8.0
3:49:46 PM: Started restoring cached node modules
3:49:46 PM: Finished restoring cached node modules
3:49:46 PM: Started restoring cached go cache
3:49:46 PM: Finished restoring cached go cache
3:49:46 PM: go version go1.16.5 linux/amd64
3:49:46 PM: go version go1.16.5 linux/amd64
3:49:46 PM: Installing missing commands
3:49:46 PM: Verify run directory
3:49:48 PM: โ€‹
3:49:48 PM: โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€
3:49:48 PM:   Netlify Build                                                 
3:49:48 PM: โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€
3:49:48 PM: โ€‹
3:49:48 PM: โฏ Version
3:49:48 PM:   @netlify/build 18.13.6
3:49:48 PM: โ€‹
3:49:48 PM: โฏ Flags
3:49:48 PM:   baseRelDir: true
3:49:48 PM:   buildId: 6155ce77e6017b0009750a9d
3:49:48 PM:   deployId: 6155ce77e6017b0009750a9f
3:49:48 PM: โ€‹
3:49:48 PM: โฏ Current directory
3:49:48 PM:   /opt/build/repo/client
3:49:48 PM: โ€‹
3:49:48 PM: โฏ Config file
3:49:48 PM:   /opt/build/repo/client/netlify.toml
3:49:48 PM: โ€‹
3:49:48 PM: โฏ Context
3:49:48 PM:   production
3:49:48 PM: โ€‹
3:49:48 PM: โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€
3:49:48 PM:   1. Build command from Netlify app                             
3:49:48 PM: โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€
3:49:48 PM: โ€‹
3:49:48 PM: $ CI= npm run build
3:49:49 PM: > myfirstreact@0.1.0 build
3:49:49 PM: > react-scripts build
3:49:51 PM: Creating an optimized production build...
3:49:59 PM: Compiled with warnings.
3:49:59 PM: 
3:49:59 PM: src/App.js
3:49:59 PM:   Line 32:6:  React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
3:49:59 PM: src/component/Header.js
3:49:59 PM:   Line 13:13:  'qty' is assigned a value but never used  no-unused-vars
3:49:59 PM: src/component/changePws.js
3:49:59 PM:   Line 8:12:  'code' is assigned a value but never used  no-unused-vars
3:49:59 PM: src/component/email.js
3:49:59 PM:   Line 16:16:  Expected '===' and instead saw '=='  eqeqeq
3:49:59 PM: src/component/forgetpassword.js
3:49:59 PM:   Line 17:16:  Expected '===' and instead saw '=='  eqeqeq
3:49:59 PM: src/component/otp.js
3:49:59 PM:   Line 1:8:    'Cookies' is defined but never used                                                                                                          no-unused-vars
3:49:59 PM:   Line 20:20:  'setReqID' is assigned a value but never used                                                                                                no-unused-vars
3:49:59 PM:   Line 36:8:   React Hook useEffect has missing dependencies: 'props.history', 'reqID', and 'userInfo'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
3:49:59 PM: src/component/product.js
3:49:59 PM:   Line 16:13:  'loading' is assigned a value but never used                                                                 no-unused-vars
3:49:59 PM:   Line 16:32:  'error' is assigned a value but never used                                                                   no-unused-vars
3:49:59 PM:   Line 21:23:  'loadingDelete' is assigned a value but never used                                                           no-unused-vars
3:49:59 PM:   Line 21:69:  'errorDelete' is assigned a value but never used                                                             no-unused-vars
3:49:59 PM:   Line 34:8:   React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
3:49:59 PM: src/component/register.js
3:49:59 PM:   Line 31:8:  React Hook useEffect has a missing dependency: 'props.history'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
3:50:00 PM: Creating deploy upload records
3:49:59 PM: src/component/signin.js
3:49:59 PM:   Line 5:10:  'setActive' is defined but never used                                                                             no-unused-vars
3:49:59 PM:   Line 24:8:  React Hook useEffect has a missing dependency: 'props.history'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
3:49:59 PM: Search for the keywords to learn more about each warning.
3:49:59 PM: To ignore, add // eslint-disable-next-line to the line before.
3:49:59 PM: File sizes after gzip:
3:49:59 PM:   60.33 KB  build/static/js/2.3088cca2.chunk.js
3:49:59 PM:   6.61 KB   build/static/js/main.d78e034b.chunk.js
3:49:59 PM:   2.32 KB   build/static/css/main.82166d46.chunk.css
3:49:59 PM:   1.62 KB   build/static/js/3.cdf89de3.chunk.js
3:49:59 PM:   1.17 KB   build/static/js/runtime-main.a6154d69.js
3:49:59 PM: The project was built assuming it is hosted at /.
3:49:59 PM: You can control this with the homepage field in your package.json.
3:49:59 PM: The build folder is ready to be deployed.
3:49:59 PM: You may serve it with a static server:
3:49:59 PM:   npm install -g serve
3:49:59 PM:   serve -s build
3:49:59 PM: Find out more about deployment here:
3:49:59 PM:   https://cra.link/deployment
3:50:00 PM: โ€‹
3:50:00 PM: (build.command completed in 11.4s)
3:50:00 PM: โ€‹
3:50:00 PM: โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€
3:50:00 PM:   2. Deploy site                                                
3:50:00 PM: โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€
3:50:00 PM: โ€‹
3:50:00 PM: Starting to deploy site from 'client/build'
3:50:00 PM: Creating deploy tree 
3:50:00 PM: 1 new files to upload
3:50:00 PM: 0 new functions to upload
3:50:00 PM: Site deploy was successfully initiated
3:50:00 PM: โ€‹
3:50:00 PM: (Deploy site completed in 326ms)
3:50:00 PM: โ€‹
3:50:00 PM: โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€
3:50:00 PM:   Netlify Build Complete                                        
3:50:00 PM: โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€
3:50:00 PM: โ€‹
3:50:00 PM: (Netlify Build completed in 11.7s)
3:50:00 PM: Starting post processing
3:50:00 PM: Post processing - HTML
3:50:00 PM: Caching artifacts
3:50:00 PM: Started saving node modules
3:50:00 PM: Finished saving node modules
3:50:00 PM: Started saving build plugins
3:50:00 PM: Finished saving build plugins
3:50:00 PM: Started saving pip cache
3:50:00 PM: Post processing - header rules
3:50:00 PM: Post processing - redirect rules
3:50:00 PM: Finished saving pip cache
3:50:00 PM: Started saving emacs cask dependencies
3:50:00 PM: Post processing done
3:50:00 PM: Finished saving emacs cask dependencies
3:50:00 PM: Started saving maven dependencies
3:50:00 PM: Finished saving maven dependencies
3:50:00 PM: Started saving boot dependencies
3:50:00 PM: Finished saving boot dependencies
3:50:00 PM: Started saving rust rustup cache
3:50:00 PM: Finished saving rust rustup cache
3:50:00 PM: Started saving go dependencies
3:50:00 PM: Finished saving go dependencies
3:50:00 PM: Build script success
3:50:01 PM: Site is live โœจ
3:50:31 PM: Finished processing build request in 1m0.713062492s

This is my package.json file littleDrop/package.json at main ยท sammyy25/littleDrop (github.com)

The app is actuall working, but it failed to make a request to my server .

Hi @sammyy25

I see you have a redirect set up in your netlify.toml which has conditions on it and headers

[[redirects]]
  from = "/api/*"
  to = "https://littledropbackend.herokuapp.com"
  status = 200
  force = true
  conditions = {Role = ["admin", "cms"]}
  [redirects.headers]
    X-From = "Netlify"
    X-Api-Key = "some-api-key-string"

The Role (see Role-based access control) condition you have set, if working, (per my understanding) would only allow admin or cms users, therefore anyone viewing your site who is neither of them, would not have access to it.

As per Custom headers in proxy redirects your headers would get written

[[redirects]]
  from = "/api/*"
  to = "https://littledropbackend.herokuapp.com"
  status = 200
  force = true
  headers = {X-From = "Netlify", X-Api-Key = "some-api-key-string"}

If you need an API key set, then the above some-api-key-string needs replacing with the real string. This would not get committed to GitHub but rather use an environment variable.

1 Like