使用nginx作为反向代理解决前后端分离时前端https,后端http造成访问无法被加载

最近公司要开发一个项目,移动端,web端,微信小程序.

起初我们使用全部是http协议,前后端分离,使用nginx作为静态资源服务器,这种部署方式很常见,网上都可以搜的到.

后来因为要让百度搜索录入词条,审核必须是https的网站,于是使用ssl证书申请了https,上一篇博客里面有介绍.至此静态资源都可以正常走https访问!

但是,如果和后端做交互,发送ajax请求或者要获取http资源的时候,就会造成https请求无法请求http后端的接口,网上搜了一下,很多人介绍说将后端的项目添加https支持,这样做是可以解决,但是有个问题,所有移动端的http请求都要改成https,这样会造成大量的工作.非常浪费人力.

后来选择nginx做反向代理,转发前端https请求到后端的http接口. 网上有一些介绍,但是不是很详尽,特此记录一下自己踩的坑:

1. 准备工作: 准备两个有SSL证书的域名,二级域名即可,(www.aaaaa.fun)(proxy.aaaaa.fun)

2. 第一个域名是用来访问静态服务器的,第二个域名是用来代理后台服务器的,这两个目前在浏览器中输入都是https前缀;

3. 上传一下对应的nginx配置文件内容:

default配置文件:

server {
    listen 443;
    server_name www.aaaaa.fun;  // 访问静态资源服务器
    ssl on;
    root /var/www/html;
    index index.html index.htm;
    ssl_certificate   cert/1529687155563.pem;
    ssl_certificate_key  cert/1529687155563.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 / {
  	root  /var/www/html;  // 静态资源的具体地址
        index index.html index.htm;  
    }
}

server {
    listen 80;  
    server_name www.aaaaa.fun;
    rewrite ^/(.*) https://$server_name$request_uri? permanent;
}

再放一下proxy配置

server {
    listen 443;
    server_name proxy.aaaaa.fun;    // 代理后端的请求地址,所有前端接口请求地址都写这个地址
    ssl on;
    root /var/www/html;
    index index.html index.htm;
    ssl_certificate   cert/1531925421222.pem;
    ssl_certificate_key  cert/1531925421222.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 / {
        proxy_pass http://120.33.111.111:7878;   //实际后台服务器地址,此地址就是http的,可以实现https转发http
    }
}

server {
    listen 80;
    server_name proxy.aaaaa.fun;
    rewrite ^/(.*) https://$server_name$request_uri? permanent;
}

以上就是所有的配置思路,主要的是走两个域名,思路会清晰很多,送给那些新手.老手可以忽略

另外还有一点就是: 一定要注意前端请求地址一定是被代理过的地址,如上https://proxy.aaaaa.fun;

一定要注意前端请求地址一定是被代理过的地址,如上https://proxy.aaaaa.fun

一定要注意前端请求地址一定是被代理过的地址,如上https://proxy.aaaaa.fun

重要的事儿说三遍!