美文网首页
nginx部署前端并解决跨域问题

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

作者: 书中自有颜如玉__ | 来源:发表于2020-05-22 11:39 被阅读0次

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;
        }
    }

相关文章

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

    1、编辑nginx/conf/nginx.conf:(1)server--location--root指向构建好的...

  • 开发中的一些小事

    跨域 问题描述:php程序部署到nginx服务器,前端调用API报出跨域问题(200时没问题,422时出现此问题)...

  • vue生产环境部署

    vue生产环境部署 Nginx部署静态资源文件和解决跨域问题下载Nginx下载地址:http://nginx.or...

  • 用nginx的反向代理机制解决前端跨域问题

    用nginx的反向代理机制解决前端跨域问题 Vue做前台,后台走接口就会遇到跨域问题。这里Nginx做反向代理是一...

  • [mark]九种跨域方式实现原理

    前端如何使用proxyTable和nginx解决跨域问题 前言 前后端数据交互经常会碰到请求跨域,什么是跨域,以及...

  • 浏览器跨域的那些事

    整理中 目标: 了解跨域 解决跨域 服务器配置跨域(java, nginx) 前端调试时配置解决跨域 一、什么是跨...

  • nginx解决前端跨越详细方法

    nginx解决前端跨域 1、安装好nginx后,进入/usr/local/etc/nginx/nginx.conf...

  • 跨域问题,解决方案

    跨域问题,解决方案 - Nginx反向代理跨域问题,解决方案 - CORS方案此为原作者的链接:跨域问题,解决之道

  • Nginx跨域

    Nginx解决跨域问题(CORS) CORS(Cross-Origin Resource Sharing) 跨域资...

  • nginx跨域访问

    前端跨域问题解决方式: 1.与服务端部署到同域上(正常部署) 2.CORS 同域安全策略CORS(Cross-Or...

网友评论

      本文标题:nginx部署前端并解决跨域问题

      本文链接:https://www.haomeiwen.com/subject/smcqahtx.html