CODEWITHSUNDEEP
reactjsdockernginxdocker-composedockerfile
George Colon
George Colon

Reputation: 41

Uncaught SyntaxError: Unexpected token '<' From ReactJS when behind Gateway (Reverse Proxy)

I am having an issue with ReactJS correctly loading when behind a Spring Cloud Gateway Reverse Proxy. If I access ReactJS directly from 192.168.99.100:3000, which is the direct docker path in the docker toolbox, it loads fine and displays all Javascript. If I, however, try to access the ReactJS project utilizing Spring Cloud Gateway at 192.168.99.100:9500/testservice/ui/ then I receive Uncaught SyntaxError: Unexpected token '<' from the command line. As well as all the static fills giving a 304 not modified.

This is a college project and part of an Independent Study. The code will be used to help with handling Authentication and Authorization for a food pantry website.

My project can be found here: BNM
And the section I am currently working on can be found here: TestService (or you can navigate the folder structure to /TestService/frontend/)

Some of the fixes I have already tried include:
Setting the homepage in the package.json file to:

"homepage":"/testservice/ui/"

Switching to an Nginx based Dockerfile

# build environment
FROM node:13.12.0-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY package-lock.json ./
RUN npm ci --silent
RUN npm install [email protected] -g --silent
COPY . ./
RUN npm run build

# production environment
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
# new
COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 3000
CMD ["nginx", "-g", "daemon off;"]

Setting base ref:

<base href="/testservice/ui/" />

I might be missing some of the things I have tried but I really am stuck

I am sorry I did not link to code directly in this post since the issue is verbose and I would want to clutter everything. If anyone would like me to post the code just request it and I will.

I thank everyone for any support they are able to give.

Upvotes: 2

Views: 1399

Answers (1)

Diego C&#226;ndido da Silva
Diego C&#226;ndido da Silva

Reputation: 485

I had the same problem when trying to use a custom base path. I researched a lot until I got an answer, the problem is in the nginx settings because we have to add a redirect configuration for the path in your case "/testservice/ui/", like this:

server {

  listen 8080;
  root   /usr/share/nginx/html;
  index  index.html index.htm;

  location /testservice/ui {
    alias   /usr/share/nginx/html;
    index  index.html index.htm;
    error_page 405 =200 $uri;
    try_files $uri $uri/ /testservice/ui/index.html;

    location = /testservice/ui/index.html {
        add_header Cache-Control "no-cache,no-store";
    }
    location ~* \.(css|js){
        add_header Cache-Control "max-age=31536000";
    }
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

Upvotes: 1

Related Questions