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

10 篇文章 0 订阅
1 篇文章 0 订阅

问题简述

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

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

程序员的解题思路 F12

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

页面的head中加入:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

意思是自动将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的路径是以根路径为基的,不懂得去查(我说不清楚,也是今天栽跟头查的…)
  • 写完后重新启动,直接访问会报不安全,打开网站没问题

吐槽:代码虽少,头是真的疼啊

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 安装node.js 首先需要安装node.js,可以在官网上下载安装包,安装完成后,打开终端或命令行,输入以下命令,确认已经安装成功: node -v npm -v 2. 创建项目 在终端或命令行中,进入项目所在目录,执行以下命令,创建一个新的node.js项目: npm init 根据提示输入项目信息,完成项目初始化。 3. 安装依赖 在项目根目录下创建一个新的文件夹,命名为“server”,用来存放后端代码。然后,在终端或命令行中,进入server文件夹,执行以下命令,安装所需的依赖: npm install express body-parser request --save 这里使用了express框架、body-parser中间件和request模块,分别用于服务器、解析请求体和发送HTTP请求。 4. 编写后端代码 在server文件夹下创建一个新的文件,命名为“app.js”,用来编写后端代码。以下是一个简单的示例: const express = require('express'); const bodyParser = require('body-parser'); const request = require('request'); const app = express(); app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); app.get('/api/data', function(req, res) { const data = { name: 'Tom', age: 18 }; res.send(data); }); app.post('/api/login', function(req, res) { const { username, password } = req.body; if (username === 'admin' && password === '123456') { res.send({ code: 0, message: '登录成功' }); } else { res.send({ code: -1, message: '登录失败' }); } }); app.listen(3000, function() { console.log('Server is running on http://localhost:3000'); }); 这段代码定义了两个接口:一个GET请求,返回一个对象;一个POST请求,根据请求体中的用户名和密码返回登录结果。端口号为3000。 5. 启动服务器 在终端或命令行中,进入server文件夹,执行以下命令,启动服务器: node app.js 如果一切正常,可以看到控制台输出“Server is running on http://localhost:3000”。 6. 发送请求 可以使用postman等工具发送请求,也可以在小程序中使用wx.request()方法发送请求。以下是一个简单的示例: wx.request({ url: 'http://localhost:3000/api/data', success: function(res) { console.log(res.data); } }); 这段代码发送一个GET请求请求返回的数据将在控制台输出。 至此,一个基于node.js建的前端服务器就完成了。可以根据自己的需求,编写更多的接口和功能。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值