Nginx 配置Nextjs和SpringBoot项目的https并解决跨域问题

目录

一、Nginx配置文件

二、跨域解决

一、Nginx配置文件

 # 禁止ip访问
    server {
        ssl_certificate      /ssl/xloda.com_cert_chain.pem;
        ssl_certificate_key  /ssl/xloda.com_key.key;

        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;

        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;
    
        listen 80 default_server;
        listen 443 ssl default_server;
        server_name _;
        
        #强制将http的URL重写成https
        return 301 https://xloda.com$request_uri;
    }

    
     server {
        listen       80;
        #  д  ֤       
        server_name  xloda.com;
    
        #charset koi8-r;
    
        # access_log  logs/host.access.log  main;
    
        #ǿ ƽ http  URL  д  https
        return 301 https://$host$request_uri;
    }
    
    # HTTPS server
    #
    server {
        listen       443 ssl;
        server_name  xloda.com;

        ssl_certificate      /ssl/xloda.com_cert_chain.pem;
        ssl_certificate_key  /ssl/xloda.com_key.key;

        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;

        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;
        
        location /qiniu/ {
            add_header 'Access-Control-Allow-Origin' $http_origin;
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS,PUT,PATCH,DELETE,HEAD';
            add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain; charset=utf-8';
                add_header 'Content-Length' 0;
                return 204;
            }
        
            proxy_pass http://qiniu.xloda.com/;
        }
        
        location / {
            root   /www/wwwroot/out;
            index  index.html index.htm;
            try_files $uri $uri.html $uri/ =404;
            rewrite ^//(.*)$ //$1.html break;
        }
        
        error_page 404 /404.html;
        location = /404 {
            internal;
        }
    }

二、跨域解决

起初配置了https的前端是不能正常访问http的后端的，于是我将后端项目也配置成了https，后端数据问题得以解决，但这里的OSS为七牛云绑定的http链接，图片资源还是会报错，于是我采用了代理加跨域允许的方式解决了该问题。

location /qiniu/ {
            add_header 'Access-Control-Allow-Origin' $http_origin;
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS,PUT,PATCH,DELETE,HEAD';
            add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain; charset=utf-8';
                add_header 'Content-Length' 0;
                return 204;
            }
        
            proxy_pass http://qiniu.xloda.com/;
        }

这里的   xloda.com/qiniu/  就类似于  qiniu.xloda.com/  前端项目里将OSShost改成代理的路径即可。