域名配置https时,请求无响应的解决方法

大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂。

在这里插入图片描述

前言

在项目需要上线时,我们经常会遇到这样的需求,将http的域名换成https,或者当我们使用小程序开发时,只支持https的请求方式,那么这个时候我们可能就得需要配置一下https证书了,今天,我们就来看看如何配置https证书,包括遇到的一些坑(南辕北辙搞了5个小时)

申请域名

申请域名很简单,大家可以直接去各大云厂商去申请即可,可以去万网上申请,现在域名注册的通道还是蛮多的,这里就不详细说了,申请自己想要的域名,支付了就可以。

解析域名

当域名申请完毕后,我们需要对该域名进行解析,我这里使用的是二级域名,解决方法也比较简单,如图所示,我们先进入域名列表,然后点击后面的【解析】
在这里插入图片描述
然后点击【添加记录】
在这里插入图片描述
接着我们需要将主机记录记录类型填写上,点击【确定】即可。
在这里插入图片描述

申请SSL证书

先找到我们添加的域名,然后后面有个【SSL】,点击即可。
在这里插入图片描述
大概等个10多分钟就差不多申请完毕,颁发下来了。

然后我们将证书下载到本地,在上传到服务器中的指定目录下,我这边上传到了/data/www/https/目录下了。

放开443端口

切记,一定要放开443端口,一定要放开,一定要放开!!!
如果你是用宝塔部署的话,看看有没有开防火墙,若是开了,则先关闭掉,不然443端口不管用,监听不到。

监听443端口的命令:

telnet ip 端口号

配置nginx

下面我们需要配置一下nginx,配置信息关键部分如下:

 ##lifetree项目
    server {
        listen       80;
        listen       443 ssl http2;
        server_name  你的域名;
        
         if ($server_port !~ 443){
             rewrite ^(/.*)$ https://$host$1 permanent;
         }
        
        #证书地址
         ssl_certificate /data/https/pem文件;
         ssl_certificate_key /data/https/key文件;
         ssl_prefer_server_ciphers on;
 
        location / {
            root /data/web/dist;   ##前端vue文件路径
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        
        location ^~ /admin/ {
            proxy_pass http://xxx.xxx.xxx:9998/;  ## 后端接口请求的地址
            proxy_connect_timeout 300s;
            proxy_send_timeout 300s;
            proxy_read_timeout 300s;
        }
       
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    ## server结束
	

然后就可以了,打工告成!!!

注意事项:

  1. 检查防火墙有没有关
  2. 检查443端口以及其他业务端口有没有放开
  3. 检查ssl证书是不是该域名下的
  4. 检查nginx中的配置,看看有没有错
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 在 uni-app 中,解决跨域请求方法有以下几种: 1. 使用 jsonp 请求 2. 使用代理,在本地启动一个服务器来作为代理,发起跨域请求以本地服务器为中介,避免跨域的限制 3. 在服务器配置跨域,如果服务器端允许跨域,则可以在服务器端设置 HTTP header,允许跨域访问。例如,在 Express.js 中可以使用 cors 中间件来实现。 如果你想深入了解跨域请求的原理,你可以参考以下资料: - 跨域资源共享 (CORS):https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS - HTTP 访问控制 (CORS):https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS - 跨域请求的简单请求与预检请求https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS/Simple_requests_and_preflight_requests ### 回答2: 在uni-app中请求跨域解决方法有以下几种: 1. 使用uni.request方法发送请求,在请求header中添加"Access-Control-Allow-Origin"字段,允许指定的域名或通配符"*",例如: ``` uni.request({ url: 'http://example.com/api', method: 'GET', header: { "Access-Control-Allow-Origin": "*" }, success: function(res) { console.log(res.data); } }); ``` 2. 在uni-app的开发配置文件manifest.json中,添加"networkTimeout"字段来配置跨域请求的超间,例如: ``` "networkTimeout": { "request": 10000, "connectSocket": 10000, "uploadFile": 10000, "downloadFile": 10000 } ``` 3. 使用uni.request方法发送请求,设置withCredentials为true,开启跨域请求携带cookie功能。但需要注意服务器端也需要设置响应头允许接收cookie,例如: ``` uni.request({ url: 'http://example.com/api', method: 'GET', withCredentials: true, success: function(res) { console.log(res.data); } }); ``` 4. 在uni-app的开发配置文件manifest.json中,添加"filters"字段配置全局过滤器来处理跨域请求,例如: ``` "filters": { "request": { "origin": "*", "x-requested-with": "*", "content-type": "application/json" } } ``` 以上是一些常用的uni-app中处理cors跨域请求方法,根据具体情况选择适合的解决方案。 ### 回答3: 在UniApp中解决跨域问题可以通过配置服务器设置CORS(跨域资源共享)来实现。 首先,在后端服务器上设置CORS。在服务器返回响应,需要在响应头中添加相关的CORS头信息,允许前端跨域访问该接口。常见的CORS头信息包括:Access-Control-Allow-Origin、Access-Control-Allow-Headers、Access-Control-Allow-Methods等。具体配置方法可以根据后端服务器的不同而有所差异,请根据服务器文档进行设置。 其次,在UniApp中发起请求,需要在请求头中添加Origin字段表示请求的源地址。同,UniApp默认会在请求头中自动添加Referer字段来表示访问来源,可根据需要进行调整。 另外,UniApp还提供了特定的API来设置请求配置,可以通过修改uni.request方法的header参数或通过配置uni.request.defaults.header来添加请求头,以适应不同的CORS设置。 需要注意的是,前端涉及到跨域请求,在接口上必须进行预检请求(Preflight Request)的检测,包括发送一个OPTIONS请求以校验服务器是否允许当前请求。 总结起来,解决UniApp中的CORS跨域问题,需要在后端服务器进行相关CORS设置,并在UniApp中添加请求头信息,确保请求能够正常跨域访问后端接口。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

穆雄雄

哎,貌似还没开张来着呢~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值