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返回出来了。

相关推荐
en-route2 小时前
Http请求中的特殊字符
spring·http
游戏开发爱好者812 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
代码搬运媛12 小时前
HTTP REST API、WebSocket、 gRPC 和 GraphQL 应用场景和底层实现
websocket·http·graphql
蔡不菜和他的uU们15 小时前
LAMP迁移LNMP Nginx多站点配置全流程
运维·nginx
一眼万年0416 小时前
Nginx Master-Worker 进程间的共享内存是怎么做到通用还高效的?
后端·nginx·面试
用户697793063425316 小时前
什么?2025年了发版后还要手动清浏览器缓存?
前端·nginx
不认输的西瓜18 小时前
前端网络知识——HTTP和HTTPS
http·https
Jiude18 小时前
如何使用 Certbot 为域名配置永久免费的 HTTPS 证书
后端·nginx·https
2501_9159184120 小时前
iOS 性能监控工具全解析 选择合适的调试方案提升 App 性能
android·ios·小程序·https·uni-app·iphone·webview
Britz_Kevin1 天前
从零开始的云计算生活——番外3,LVS+KeepAlived+Nginx高可用实现方案
nginx·云计算·生活·lvs·#keepalived