本篇內(nèi)容主要講解“nginx前后端分離解決跨域問題”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“nginx前后端分離解決跨域問題”吧!

創(chuàng)新互聯(lián)建站是一家專業(yè)提供喀什企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站制作、成都網(wǎng)站制作、H5網(wǎng)站設(shè)計(jì)、小程序制作等業(yè)務(wù)。10年已為喀什眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。

場(chǎng)景

1. 適用于公司有前端，項(xiàng)目采用前后端分離。類似于我們 后端 springboot 提供接口，前端專門寫html調(diào)用相應(yīng)的接口，解決跨域問題

配置說明

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 / {

              # 把跟路徑下的請(qǐng)求轉(zhuǎn)發(fā)給前端工具鏈（如gulp,webstorm,anywhere）打開的開發(fā)服務(wù)器
              # 如果是產(chǎn)品環(huán)境，則使用root等指令配置為靜態(tài)文件服務(wù)器
              # proxy_pass http://localhost:80;

              #proxy_redirect default;
          }

      location /management/ {
          # 把 /api 路徑下的請(qǐng)求轉(zhuǎn)發(fā)給真正的后端服務(wù)器
        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;
      }

    }
}

重點(diǎn)說明 location的配置 。

比如前端html請(qǐng)求地址 http://localhost:80/index.html

前端調(diào)用接口的地址為 http://localhost:80/api 其實(shí)api并不在改域下，在http://192.168.199.111:8888/ 下 則需要解決2個(gè)問題 前端ajax跨域與接口轉(zhuǎn)發(fā)到相應(yīng)位置

** 著重看 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; // 發(fā)送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;
  }

}

到此，相信大家對(duì)“nginx前后端分離解決跨域問題”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！