The front and back end of nginx is separated from the proxy forwarding to solve the cross domain problem

scene

  1. It is applicable to the company with front-end, and the project adopts front-end separation. Similar to the interface provided by our back-end springboot, the front-end specially writes html to call the corresponding interface to solve cross domain problems.

Configuration description

worker_processes  1;



events {
    worker_connections  10240;
}


http {
    include       mime.types;
    default_type  application/octet-stream;
    client_max_body_size 200M;
    client_header_buffer_size 8k;
    large_client_header_buffers 8 16k;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  on;

    sendfile        on;

    keepalive_timeout  300;

    gzip  on;
    gzip_http_version 1.0;
    gzip_disable "MSIE [1-6].";
    gzip_types text/plain application/x-javascript text/css text/javascript;


    server {
        listen       80;
        server_name  localhost;
        client_header_buffer_size 8k;
        large_client_header_buffers 8 16k;


        root   /usr/share/nginx/html;

          location / {

              # Forward the request under the following path to the development server opened by the front-end tool chain (such as gulp,webstorm,anywhere)
              # If it is a product environment, configure it as a static file server by using the command such as root.
              # proxy_pass http://localhost:80;

              #proxy_redirect default;
          }

      location /management/ {
          # Forward the request under the / api path to the real back-end server
        proxy_pass http://192.168.199.131:8090/management/;
          proxy_cookie_path  /management/ /;
        proxy_set_header   Host    $host;
        proxy_set_header Cookie $http_cookie;
        proxy_set_header   Remote_Addr    $remote_addr;
        proxy_set_header   X-Real-IP    $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;

          client_max_body_size 200m;

          proxy_connect_timeout 18000;

          proxy_send_timeout 18000;

          proxy_read_timeout 18000;
        }


      location /agents/ {
        proxy_pass http://192.168.199.131:8092/;
          proxy_cookie_path  /agents/ /;
        proxy_set_header   Host    $host;
        proxy_set_header Cookie $http_cookie;
        proxy_set_header   Remote_Addr    $remote_addr;
        proxy_set_header   X-Real-IP    $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
       
        client_max_body_size 200m;

        proxy_connect_timeout 18000;

        proxy_send_timeout 18000;

        proxy_read_timeout 18000;
      }

    }
}

Focus on the configuration of location.

For example, the front-end html request address http://localhost:80/index.html

The address of the front-end calling interface is http://localhost:80/api In fact, the api is not under the domain change. http://192.168.199.111:8888/ Next, we need to solve two problems: the front-end ajax forwards to the corresponding location across domains and interfaces

**Focus on 1 2 3**

     location /api/ {  // 1 
    proxy_pass http://192.168.199.111:8888/; // 2 
      proxy_cookie_path  /api/ /; // 3 
    proxy_set_header   Host    $host;
    proxy_set_header Cookie $http_cookie; // Sending cookie s to solve session consistency problems
    proxy_set_header   Remote_Addr    $remote_addr;
    proxy_set_header   X-Real-IP    $remote_addr;
    proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;

    client_max_body_size 200m;

    proxy_connect_timeout 18000;

    proxy_send_timeout 18000;

    proxy_read_timeout 18000;
  }

}

If you feel that the article is helpful to you, you can focus on the WeChat public.

Keywords: Programming Javascript SpringBoot Nginx Session

Added by inVINCEable on Wed, 30 Oct 2019 16:46:58 +0200