On the configuration of front-end and back-end separation system implemented by nginx

problem description

in the front-end separate system, the front-end and back-end projects have been deployed, but the front-end project cannot access the database bound to the back-end project and cannot obtain the contents of the database.

the environmental background of the problems and what methods you have tried

root in nginx points to the dist file generated by the local vue project, and then proxies the request to the server port of tomcat in location.

related codes

/ / Please paste the code text below (do not replace the code with pictures)

server {
  listen 80;
  server_name  localhost;
  proxy_set_header X-Real-IP $remote_addr;
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Headers X-Requested-With;
  add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
  add_header Access-Control-Allow-Headers Origin,X-Requested-Width,Content-Type,Accept;
client_max_body_size 30M;
  limit_rate 100k;

  gzip  on;
  gzip_min_length 1k;
  gzip_buffers 16 64k;
  gzip_http_version 1.1;
  gzip_comp_level 2;
  gzip_types application/json text/plain text/css;
  gzip_vary on;

  location ~* \.(txt|pem|p12|url)$ {
    deny all;
  }
   location / {
    default_type application/json;
     proxy_pass http://localhost:8888;
  }
}

the port of my tomcat is 8888, and the path of root is placed under http

what result do you expect? What is the error message actually seen?

tried a lot of methods but can not solve, ask the great god for advice, where is the problem with me?

server { listen 80; server_name www.example.com; root /Users/zhangjing/Projects/example.com/dist; location / { index index.html; } location /backend/ { proxy_pass http://127.0.0.1:8080; } }