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?

Nginx java ubuntu
May.22,2021

Front-end separation refers to a separate web server at the front end and a separate web server at the back end, which can be different physical servers or on the same physical server, but two different nginx hosts are configured, or even on the same nginx host, but at least there must be different paths for separation. For example, https://www.example.com/frontend is the front-end service path, and https://www.example.com/backend is the back-end service path. It is OK to put them all in frontend , but at least let nginx know what it needs to reverse proxy the same path to tomcat, and the same file. It is impossible to let it go to the front end and reverse proxy to tomcat,.

for example: 

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;
    }
}

here, / is pointed to the dist directory to provide front-end services, and / backend is reverse proxied to the local 8080 port to provide back-end services. Only in this way can the front and rear ends be separated correctly, otherwise there is no way to provide services by mixing the front and rear ends together.

Why should cross-domain be allowed in the nginx setting? Which domain is allowed to request across domains, but the specific application does not know? Is it nginx's turn to do this?

Previous: Is there any solution to whether the node micro-services architecture will reduce the efficiency and response time of the back end?

Next: A problem about source code in thinkphp5

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu