用nginx代理實現前后端分離

前端用的是nginx作為容器，原理就是所有后端訪問IP端口都是NGINX這台服務器，然后根據標識用nginx轉發到后台服務器

比如get請求是訪問ip:端口/api/ 然后用location將/api/ proxy到后端服務

 

NGINX配置

server {
    listen 20829;
    server_name  10.203.102.109;
    
    access_log  /midware/data/linux_nginx_1.12.2/logs/msg_mgt_portal_access.log json;
    error_log     /midware/data/linux_nginx_1.12.2/logs/msg_mgt_portal_error.log;
    location / {
    root /midware/apps/msg_mgt_portal; 
    }
    location /api/ {
        proxy_pass http://10.203.102.108:20828/;
        proxy_next_upstream http_500 http_504 http_502 error timeout invalid_header;
        # 啟用keep alive
        proxy_http_version 1.1;
        proxy_set_header Connection "";

        # 獲取 xforward和真實IP
        proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header  X-Real-IP  $remote_addr;
        proxy_set_header  Host $host;
    }
 }

之前前端代碼

          mounted() {
      this.$http.get('http://10.203.102.108:20828/api/get_jobs').then(response => {
          this.restaurants=response.data.jobs;
        );
    }              //之前是直接訪問后端IP，端口

更改之后

          mounted() {
      this.$http.get('http://10.203.102.109:20829/api/get_jobs').then(response => {
          this.restaurants=response.data.jobs;
        );
    }    //直接訪問前端部署服務器IP，端口，然后nginx location根據 api規則 proxy到后端端口，這就實現了跨域