美文网首页
nginx配置ssl使用https(解决前端跨域问题)

nginx配置ssl使用https(解决前端跨域问题)

作者: lannisiter | 来源:发表于2020-09-27 17:46 被阅读0次

想要使用https访问nginx上部署的项目首先得有ssl证书,ssl证书可以去阿里云或腾讯云之类的平台购买,当然也有免费的。我这里贴出nginx的相关配置来支持https访问,如果不知道怎样配置或者搞不清楚原理的朋友就直接照搬我的这部分server配置就行。
PS:nginx需要安装ssl模块,如果使用docker启动的nginx则已经有了不需要安装。

#配置负载均衡的服务器
upstream backend {
        server xxx.xxx.xxx.xxx:xxxx; #这里配置个人服务器的ip和端口
    }
server {
        listen       443 ssl;
        server_name  www.abc123.com;
        #这里是ssl证书的位置
        ssl_certificate      /etc/nginx/cert/4373634_www.jxgxedu.cn.pem;  
        ssl_certificate_key  /etc/nginx/cert/4373634_www.jxgxedu.cn.key;
    
        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;
    
        ssl_ciphers  ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_prefer_server_ciphers  on;
        #这里配置前端打包文件的目录,访问ip:443/*时就会映射到这个目录去
        location / {
            root   /usr/share/nginx/html/edu;
                try_files $uri /index.html;
                index  index.html;
            }
        #这里是配置代理,目的是为了配合后端解决跨域问题
        location ^~ /api/  {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forworded-For $proxy_add_x_forwarded_for;
            proxy_pass       http://backend/;  #这里的backend就是上面配置的服务器
            }
    }

这里不仅配置了https对于nginx的访问,还配置了代理来访问后端接口,所以前端在做请求时,请求的地址应该写为https://www.abc123.com/api/+接口地址,这样前端就能使用https来访问到后端的接口了。

顺便贴一个把http重定向为https的配置

#配置负载均衡的服务器
upstream backend {
        server xxx.xxx.xxx.xxx:xxxx; #这里配置个人服务器的ip和端口
    }
server {
        listen       80;
        server_name  www.abc123.com;
        return 301 https://$server_name$request_uri;
    }
server {
        listen       443 ssl;
        server_name  www.abc123.com;
        #这里是ssl证书的位置
        ssl_certificate      /etc/nginx/cert/4373634_www.jxgxedu.cn.pem;  
        ssl_certificate_key  /etc/nginx/cert/4373634_www.jxgxedu.cn.key;
    
        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;
    
        ssl_ciphers  ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_prefer_server_ciphers  on;
        #这里配置前端打包文件的目录,访问ip:443/*时就会映射到这个目录去
        location / {
            root   /usr/share/nginx/html/edu;
                try_files $uri /index.html;
                index  index.html;
            }
        #这里是配置代理,目的是为了配合后端解决跨域问题
        location ^~ /api/  {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forworded-For $proxy_add_x_forwarded_for;
            proxy_pass       http://backend/;  #这里的backend就是上面配置的服务器
            }
    }

相关文章

  • Nginx 配置项目

    1、 HTTP 请求 2、HTTPS Nginx ssl配置 3、前后端分离(nginx跨域问题) 注意的是,前端...

  • nginx配置ssl使用https(解决前端跨域问题)

    想要使用https访问nginx上部署的项目首先得有ssl证书,ssl证书可以去阿里云或腾讯云之类的平台购买,当然...

  • 浏览器跨域的那些事

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

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

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

  • Nginx配置跨域请求

    Nginx配置跨域请求 背景:图片存于服务器,使用Nginx进行转发,前端使用某组件对图片进行裁剪时,请求跨域了,...

  • vue cli 解决跨域 线上 nginx 反向代理配置

    vue cli 解决跨域 线上 nginx 反向代理配置 前后分离 axios 接 api 跨域问题如图: 解决办...

  • Node接口代理方案

    背景说明 前后端分离项目要解决的第一个问题前端本地开发如何解决ajax的跨域问题,一般情况下都是使用Nginx配置...

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

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

  • Nginx 配置 HTTPS

    使用Nginx配置HTTPS域名证书 安装SSL模块要在 nginx 中配置 https,就必须安装 ssl 模块...

  • ajax跨域--nginx反向代理

    用nginx反向代理实现跨域,是最简单的跨域方式。只需要修改nginx的配置即可解决跨域问题,支持所有浏览器,支持...

网友评论

      本文标题:nginx配置ssl使用https(解决前端跨域问题)

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