https转到http的nginx配置参考

文章目录

前言

在部署项目的时候,突然发现前端的Axios报了个AxiosError,内容是Network Error。记录这一次的解决过程。

背景

本来是源于这个项目:convert-windows-cursor-to-xcursor

在这里,我简单描述一下:

前端,我没有使用任何框架,所以直接使用link引入axios.min.js,然后在script片段中直接请求:

javascript 复制代码
axios.post('http://www.sakebow.cn:40080/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' }
})
.then(function (response) {
  alert('好耶!上传好了!')
  monitorTask(response.data.task_id)
})
.catch(function (error) {
  alert(`卧槽,怎么就因为${error}崩掉了啊......`)
})

然后后端直接使用flask简单接通一下:

python 复制代码
if __name__ == '__main__':
  app.run(host='0.0.0.0', port=40080)

本地测试通过,云服务器测试通过。

那就直接上:

shell 复制代码
$ nohup gunicorn -b 0.0.0.0:40080 app:app > app.log 2>&1 &

直到这一步都是没问题的。

然后,我就心血来潮,趁着腾讯云的https还能申请一年的时候,直接就拿下了一个免费的,于是将毫无框架的前端放在了443端口上,也就是https服务。

这不放还好,一放直接炸了。因为客户端的访问是基于https的,但是在https的访问过程中由axios明文请求了http,这个操作是不被浏览器所允许的,于是就报错了。

解决方案

其实解决方案也很简单,就是将index.html中的明文http请求修改为相对请求,这样,经过https访问的浏览器就会自然而然地请求https的接口。至于之后的事情,就交给proxy_pass好了。

配置参考其实在库中的这个文件里面已经全部给出来了:

txt 复制代码
http {
  ...
  ##################### My Settings #####################
  server {
    charset                  	utf-8,gbk;
    listen		       					80;
    location / {
      root                    /usr/local/repo/cursor;
      index                   index.html;
    }
  	location /api {
      proxy_pass              http://127.0.0.1:40080/;
      expires off;
      proxy_redirect          off;
      proxy_set_header        Host             $host;
      proxy_set_header        X-Real-IP        $remote_addr;
      proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
    }
  }
  # -----------------------------------------------------
  # --------- Settings for Cloud Server (Https) ---------
  # -----------------------------------------------------
  server {
    charset                 	utf-8,gbk;
    listen										443 ssl;
    server_name								www.example.cn; # edit here
    location / {
      root			/usr/local/repo/cursor;
      index			index.html;
    }
    location /api/ {
      proxy_pass  						http://127.0.0.1:40080/;
      expires 								off;
      proxy_redirect     			off;
      proxy_set_header   			Host             $host;
      proxy_set_header   			X-Real-IP        $remote_addr;
      proxy_set_header   			X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    ssl_certificate						www/example.cn_bundle.crt;  # edit here
    ssl_certificate_key				www/example.cn.key; # edit here
    ssl_session_timeout				5m;
    ssl_protocols							TLSv1.2 TLSv1.3; 
    ssl_ciphers								ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; 
    ssl_prefer_server_ciphers	on;
  }
  ...
}

这个部分可以写在nginx.conf中,也可以将server部分拆分成多个文件,然后通过include的方式引入。

这样写的意思就是,我虽然访问了象征着https443端口,并且按照location中设定的root获取到了代表主页面的index.html信息,所有以/api/结尾的请求,都将被proxy_pass转发到象征http40080端口,最终返回的结果也将从443端口返回到客户端。

这种方法使得我们部署的任何服务,都将以index.html所处的是http80端口还是https的443端口为标准。

最后,为了方便前端能够正确访问到40080端口的服务,我们需要使用相对位置。

也就是说,请求最开始从443进来,然后通过相对位置,axios将依然通过https访问服务。这个时候,如果我们配置了nginxserver,我们将通过这个server443端口的请求转发到40080端口。我们的请求从https转移到了http,但是axios已经将数据转发到服务器后,属于axios的请求过程就告一段落了,服务器内部的nginx逻辑并不在axios的管辖范围内。

于是,按照这个逻辑,我们的请求就成功的过了一遍flask,然后通过https返回出来了。

相关推荐
梁bk4 小时前
[Nginx]反向代理和负载均衡
运维·nginx·负载均衡
游戏开发爱好者87 小时前
iOS重构期调试实战:架构升级中的性能与数据保障策略
websocket·网络协议·tcp/ip·http·网络安全·https·udp
绝不偷吃12 小时前
FastDFS分布式储存
linux·nginx
java1234_小锋14 小时前
解释一下NGINX的反向代理和正向代理的区别?
运维·nginx
tmacfrank16 小时前
Android 网络全栈攻略(四)—— TCPIP 协议族与 HTTPS 协议
android·网络·https
2501_9160137417 小时前
iOS 多线程导致接口乱序?抓包还原 + 请求调度优化实战
websocket·网络协议·tcp/ip·http·网络安全·https·udp
路长且阻18 小时前
网络协议(TCP/IP、HTTP、HTTPS)
网络协议·tcp/ip·http
吴free19 小时前
mac电脑wireshark快速实现http接口抓包
网络·测试工具·http·wireshark
PanZonghui1 天前
Centos项目部署之Nginx 的安装与卸载
linux·nginx
THMOM911 天前
TinyWebserver学习(9)-HTTP
网络协议·学习·http