解决https和http资源混用所导致的问题

问题描述

项目上线之后，http可以正常访问，https无法正常加载，此时查看浏览器控制台，发现https访问的时候出现了https和http的混用问题，随即在index页配置了<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"/> ，将https中的http请求升级到https，终于柳暗花明，https可以正常访问了。但是尴尬的是http又报了异常，此时http页面可以加载出来，但是请求接口时，控制台出现了http和https的同源跨域问题，于是开始尝试在http的nginx配置中配置同源跨域许可，一番操作之后，终于同源跨域问题也解决了，此次问题，因为在测试服务上没有出现过，确实很难预料，思考下来，这次的问题也跟线上服务器配置了阿里云的全站加速有关。

问题总结

1. https和http混用问题
   

   解决思路：
   以下情况假设不存在跨域问题
   1、如果在https网站中请求的http资源本身就支持https，可以在html页面加入<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">，浏览器在解析请求的时候会自动把http请求转化为https请求。

   2、如果如果在https网站中请求的http资源本身不支持https，可以把https网站换成http协议。（当我没说🙊）

   3、如果如果在https网站中请求的http资源本身不支持https，但是请求的http资源在属于自己的服务上（非第三方服务），并且不考虑改为https协议带来的性能问题，可以把要请求的http资源协议改为https。

   4、如果在https网站中请求的http资源本身不支持https，并且这些被请求的http资源都是静态资源（比如js、css等），可以考虑把这些资源下载下来放到现有的https服务器中，也可以寻找https协议的资源，很多免费的cdn服务都同时提供了https和http协议的静态资源。

   5、如果在https网站中请求的http资源是动态资源（比如请求http接口），且是第三方接口（自己无法变更这个第三方接口是http协议的事实），可以用nginx代理的方式。

2. http转https同源跨域问题
   

   解决思路：

   • 后端配置nginx解决跨域（服务端解决跨域）

     nginx配置如下：

     server
     {
         listen 3002;
         server_name localhost;
         location /ok {
             proxy_pass http://localhost:3000;
     
             #   指定允许跨域的方法，*代表所有
             add_header Access-Control-Allow-Methods *;
     
             #   预检命令的缓存，如果不缓存每次会发送两次请求
             add_header Access-Control-Max-Age 3600;
         
             #   带cookie请求需要加上这个字段，并设置为true
             add_header Access-Control-Allow-Credentials true;
     
             #   表示允许这个域跨域调用（客户端发送请求的域名和端口） 
             #   $http_origin动态获取请求客户端请求的域   不用*的原因是带cookie的请求不支持*号
             add_header Access-Control-Allow-Origin $http_origin;
     
             #   表示请求头的字段 动态获取
             add_header Access-Control-Allow-Headers 
             $http_access_control_request_headers;
     
             #   OPTIONS预检命令，预检命令通过时才发送请求
             #   检查请求的类型是不是预检命令
             if ($request_method = OPTIONS){
                 return 200;
             }
         }
     }
     
     location ^~  /api {
       #add_header Access-Control-Allow-Methods *;
       #add_header Access-Control-Allow-Credentials true;
       #add_header Access-Control-Allow-Origin *;
       #add_header Access-Control-Allow-Headers $http_access_control_request_headers;
       #if ($request_method = OPTIONS){
       #   return 200;
       #}
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_pass http://127.0.0.1:7247;
     }