node后端_搭建静态图片服务器(读取返回图片接口)

1.安装node和express框架

2.使用express框架初始化一个项目(后端服务)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.准备好接口要返回的图片,放到images目录下

在这里插入图片描述

4.运行服务

在这里插入图片描述
访问localhost:3000,能够正常访问说明服务已经启动了
在这里插入图片描述
这个时候我们只要在地址框输入localhost:3000/images/1.jpg就可以访问到刚才放在images文件夹下面的图片
在这里插入图片描述
这个时候我们的后台服务显示图片请求成功
在这里插入图片描述

5.重点:在自己的项目中请求接口的图片

因为通常我们的项目的地址和接口的地址会不一样,这个时候就会有跨域的问题,所以需要在app.js中设置接口可以跨域请求
  • 如果接口不设置跨域,请求图片
    在这里插入图片描述
    在这里插入图片描述
    就会报错,说明http://192.168.43.42:8080无法请求拿到 http://localhost:3000该地址接口下的文件.
设置接口可以跨域

1.打开app.js
在这里插入图片描述
2.添加跨域设置

//解决跨域
app.all('*', function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');  //设置允许跨域的域名,*代表允许任意域名跨域
  res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With');//允许的header类型
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS'); //跨域允许的请求方式 
  if (req.method == 'OPTIONS') {
    res.send(200);//让options尝试请求快速结束
  } else {
    next();
  }
});

在这里插入图片描述
这个时候就可以在任意网址下请求接口的资源
在这里插入图片描述
原理也很简单,同样是在app.js里面,express框架已经帮我们配置好了静态资源的地址是在public文件夹下
在这里插入图片描述
在这里插入图片描述
这样我们就可以用http://localhost:3000/images/1.jpg这样请求拿到, 所以我们可以把静态资源放到这里, 充当一个简易的静态资源服务器, 这样就可请求访问拿到图片等资源
在这里插入图片描述

  • 5
    点赞
  • 34
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Node.js 中访问静态资源目录并读取图片可以使用 `express` 框架和 `path` 模块。下面是一个示例代码,展示了如何在 Node.js 中访问静态资源目录并读取图片: 首先,确保你已经安装了 `express` 和 `path` 模块。你可以使用以下命令进行安装: ``` npm install express path ``` 接下来,创建一个名为 `server.js` 的文件,并添加以下代码: ```javascript const express = require('express'); const path = require('path'); const app = express(); const port = 3000; // 设置静态资源目录 app.use(express.static(path.join(__dirname, 'public'))); // 路由处理 app.get('/', (req, res) => { res.send('Hello World!'); }); // 启动服务器 app.listen(port, () => { console.log(`Server is running on port ${port}`); }); ``` 在上述代码中,我们引入了 `express` 和 `path` 模块,并创建了一个 Express 应用程序实例 `app`。我们将静态资源目录设置为 `/public`,你可以根据自己的需求更改目录路径。 接下来,我们添加了一个基本的路由处理,在根路径 `/` 上返回 "Hello World!" 字符串。 最后,我们使用 `app.listen()` 方法启动服务器,并指定监听的端口号为 `3000`。 在项目根目录下创建一个名为 `public` 的文件夹,并将你的图片放在其中。 现在,当你启动服务器并访问 `http://localhost:3000/your-image.jpg` 时,Node.js 将从静态资源目录中读取返回相应的图片。 希望以上信息对你有所帮助!如果有任何问题,请随时提问。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值