nginx 前后端分离 代理转发,解决跨域问题

·  阅读 500

场景

  1. 适用于公司有前端,项目采用前后端分离。类似于我们 后端 springboot 提供接口,前端专门写html调用相应的接口,解决跨域问题

配置说明

    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 / {复制代码
                  # 把跟路径下的请求转发给前端工具链(如gulp,webstorm,anywhere)打开的开发服务器
                  # 如果是产品环境,则使用root等指令配置为静态文件服务器
                  # proxy_pass http://localhost:80;复制代码
                  #proxy_redirect default;
              }复制代码
          location /management/ {
              # 把 /api 路径下的请求转发给真正的后端服务器
            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;
          }复制代码
        }
    }
复制代码

重点说明 location 的配置 。

比如前端html请求地址 http://localhost:80/index.html

前端调用接口的地址为 http://localhost:80/api 其实api并不在改域下,在http://192.168.199.111:8888/ 下 则需要解决2个问题 前端ajax跨域与接口转发到相应位置

着重看 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; // 发送cookie 解决 session 一致性问题
        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;
      }复制代码
    }复制代码

如感觉文章对你有所帮助,可以关注微信公众号【五彩的颜色】鼓励一下

分类:
后端
标签:
分类:
后端
标签: