nginx部署前端并解决跨域问题

1、编辑nginx/conf/nginx.conf:
（1）server--location--root指向构建好的项目文件夹（index.html的位置）；
（2）/mobile是接口带的前缀，类似本地代理服务，最后会去掉；

# 匹配mobile之后的路径和参数
rewrite  ^.+mobile/?(.*)$ /$1 break;
include  uwsgi_params;
# 实际调用的API
proxy_pass http://imedstic.cn:8085;

完整代码：

server {
        listen       9006;
        server_name  localhost;
        #请求限制大小，默认1M，设置20M，避免报413错误
        client_max_body_size 20m;
        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   "E:\web-mobile-dispatch";
            index  index.html index.htm;
        }

        location /mobile {
          if ($request_method = 'OPTIONS') {
              add_header 'Access-Control-Allow-Origin' '*';
              add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
              add_header 'Access-Control-Max-Age' 1728000;
              add_header 'Content-Type' 'text/plain charset=UTF-8';
              add_header 'Content-Length' 0;
              return 204;
          }
          if ($request_method = 'POST') {
              add_header 'Access-Control-Allow-Origin' *;
              add_header 'Access-Control-Allow-Credentials' 'true';
              add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
              add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
          }
          if ($request_method = 'GET') {
              add_header 'Access-Control-Allow-Origin' *;
              add_header 'Access-Control-Allow-Credentials' 'true';
              add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
              add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
          }
          # 匹配mobile之后的路径和参数
          rewrite  ^.+mobile/?(.*)$ /$1 break;
          include  uwsgi_params;
          # 实际调用的API
          proxy_pass http://imedstic.cn:8085;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

配置使用域名：

server {
        listen 80;
    listen 443 ssl;
    server_name www.imedstic.top;
    client_max_body_size   20m;
    root   E://web-mobile-dispatch;
    
    ssl_certificate  cert/4080309_www.imedstic.top.pem;
    ssl_certificate_key cert/4080309_www.imedstic.top.key;
        
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
        
    location / {
            index  index.html index.htm;
    }
    #接口服务
        location /mobile {
          if ($request_method = 'OPTIONS') {
              add_header 'Access-Control-Allow-Origin' '*';
              add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
              add_header 'Access-Control-Max-Age' 1728000;
              add_header 'Content-Type' 'text/plain charset=UTF-8';
              add_header 'Content-Length' 0;
              return 204;
          }
          if ($request_method = 'POST') {
              add_header 'Access-Control-Allow-Origin' *;
              add_header 'Access-Control-Allow-Credentials' 'true';
              add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
              add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
          }
          if ($request_method = 'GET') {
              add_header 'Access-Control-Allow-Origin' *;
              add_header 'Access-Control-Allow-Credentials' 'true';
              add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
              add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
          }
          # 匹配mobile之后的路径和参数
          rewrite  ^.+mobile/?(.*)$ /$1 break;
          include  uwsgi_params;
          # 实际调用的API
          proxy_pass https://www.imedstic.top:8086;
        }
    #接口服务
        location /wx {
          if ($request_method = 'OPTIONS') {
              add_header 'Access-Control-Allow-Origin' '*';
              add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
              add_header 'Access-Control-Max-Age' 1728000;
              add_header 'Content-Type' 'text/plain charset=UTF-8';
              add_header 'Content-Length' 0;
              return 204;
          }
          if ($request_method = 'POST') {
              add_header 'Access-Control-Allow-Origin' *;
              add_header 'Access-Control-Allow-Credentials' 'true';
              add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
              add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
          }
          if ($request_method = 'GET') {
              add_header 'Access-Control-Allow-Origin' *;
              add_header 'Access-Control-Allow-Credentials' 'true';
              add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
              add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
          }
          # 匹配mobile之后的路径和参数
          # rewrite  ^.+wx/?(.*)$ /$1 break;
          include  uwsgi_params;
          # 实际调用的API
          proxy_pass http://www.imedstic.top:8888;
        }
    }