express搭服务器nodejs做后端vue做前端部署服务器后接口不支持https问题

express搭服务器nodejs做后端vue做前端部署服务器后接口不支持https问题

文章目录

• 问题简述
• 解决
• 注意事项

问题简述

用于练习，用nodejs写了后端接口，vue写前端，express搭建服务器，本地一切顺利(除了我这该死的审美观和黄豆大小的创造力)

将项目部署在服务器后，我欣喜若狂的在本机访问，然后…头部出现了！！！入口一个都没有…
入口是通过api调用的数据渲染的

程序员的解题思路 F12

网络请求报错
blocked:mixed-content
查了一下，在https下不支持http请求（我的网站一配置ssl证书）
于是拆东补西，网上查了一下，答案如下

页面的head中加入：



意思是自动将http的不安全请求升级为https

我欣喜若狂，马上就能看到了，随即 CV领域施展，然后，然后…
报(failed)net::ERR_SSL_PROTOCOL_ERROR错误
程序员第二奥义，面向网络编程领域开展

网友说，啊，http的请求头不对，不支持https，改回http

我：**********
（此处我非是抱怨网友，因为网友的答案是对的，我一想，两个问题都是对的，那么，只能是从服务端入手了）

灵光一闪！啊，我把api服务配置成https不就成了吗！
nice！！

怎么配呢…

程序员第二奥义!!!

解决

在express服务中添加如下代码

var https = require('https');
var fs = require('fs');
var path = require('path');
 
var privateCrt = fs.readFileSync(path.join(process.cwd(), 'https/1_likepoetry.top_bundle.crt'), 'utf8');
var privateKey = fs.readFileSync(path.join(process.cwd(), 'https/2_likepoetry.top.key'), 'utf8');
const HTTPS_OPTOIN = {
  key: privateKey,
  cert: privateCrt
};
const SSL_PORT = 81;
const httpsServer = https.createServer(HTTPS_OPTOIN, app);
httpsServer.listen(SSL_PORT, () => {
  console.log(`HTTPS Server is running on: https://localhost:${SSL_PORT}`);
});

注：
https/1_likepoetry.top_bundle.crt
https/2_likepoetry.top.key
是你的网站的ssl证书，下载后
以腾讯云为例：
在SSL证书中下载
地址
文件在解压后的Nginx文件夹内

注意事项

• 证书必须生效（废话）
• nodejs的路径是以根路径为基的，不懂得去查（我说不清楚，也是今天栽跟头查的…）
• 写完后重新启动，直接访问会报不安全，打开网站没问题

吐槽：代码虽少，头是真的疼啊