用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到后端端口，这就实现了跨域