响应对象是指服务器向客户端响应数据的对象，包含所有要响应的内容。
-
send()方法：
向页面发送各种数据
res.send(data):data可以是任意数据类型（模板、json数据均可以）
这是因为send()方法的第一个参数是状态码，因此当你传入数字进去的时候，会被误认为传入的状态码的值，因此会导致报错。
app.get('/getData', (req, res, next) => {
// res.send(1);
// res.send('111');
res.send({name:'11'})
})
app.use((err, req, res, next) => {
res.status(500).send(`页面异常.`); // 如果请求返回的状态码为500，那么抛出错误
})
-
sendFile()方法：
读取本地的文件数据流
const express = require("express");
const path = require("path");
const bodyParser = require("body-parser");
const app = express();
// 拦截所有请求，配置body-parser模块
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true})); // 一般设置为true
app.get('/qryStudent', (req, res, next) => {
let { uuid } = req.query;
res.sendFile(path.join(__dirname, `./public/students/${uuid}.json`), (error, data) => {
if(error) {
throw error;
} else {
console.log('查询成功...');
}
})
})
app.use((err, req, res, next) => {
res.status(500).send(`页面异常.`); // 如果请求返回的状态码为500，那么抛出错误
})
app.listen(3000, () => console.log('http://localhost:3000'))
图1.png
-
res.json()方法：
res.json方法可以返回一个json对象的数据出去
app.get('/qryStudent', (req, res, next) => {
res.json({
name:'张三',
age:20,
province:'江苏省'
})
})
图2.png
-
res.download()方法：
用于下载当前目录下的文件。
app.get('/download', (req, res, next) => {
res.download(path.join(__dirname, './assets/image.zip'));
})
图3.png
-
res.end()方法：
用于结束与客户端的响应。
app.get('/qryData', (req, res, next) => {
res.end('响应完成');
})
同源策略问题
如果两个 URL 的 protocol、port和 host 都相同的话，则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”.
代码示例：
首先我们模拟服务器A发送接口/qryData数据，让模拟的前端页面去调用，fetch是浏览器自带的ajax的方法。
const express = require("express");
const path = require("path");
const bodyParser = require("body-parser");
const app = express();
// 拦截所有请求，配置body-parser模块
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true})); // 一般设置为true
// 模拟服务器A发送接口数据
app.get('/qryData', (req, res, next) => {
res.send({
name:'aa',
age:20
})
})
// 访问静态资源文件
app.use(express.static(path.join(__dirname, '/public')));
app.use((err, req, res, next) => {
res.status(500).send(`页面异常.`); // 如果请求返回的状态码为500，那么抛出错误
})
app.listen(3000, () => console.log('http://localhost:3000'))
模拟的前端页面通过fetch方法去调用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
</head>
<body>
<p>首页</p>
<script>
// fetch是浏览器自带的ajax
fetch('/qryData').then(res => res.json()).then(data => {
console.log(data);
})
</script>
</body>
</html>
图4.png
但是当我们更换为两个不同端口号的路径进行访问时，就会出现跨域问题
// 后台A发送接口数据
app.get('/qryData', (req, res, next) => {
res.send({
name:'aa',
age:20
})
})
// 前端B请求接口获取数据
<body>
<p>首页</p>
<script>
// fetch是浏览器自带的ajax
fetch('http://localhost:3000/qryData').then(res => res.json()).then(data => {
console.log(data);
})
</script>
</body>
图5.png
这样就造成了跨域，导致数据访问不到。
-
跨域的解决方案：
1、CORS解决跨域
后台在写接口的时候修改'Access-Control-Allow-Origin'的值为*号
// 模拟服务器A发送接口数据
app.get('/qryData', (req, res, next) => {
res.set('Access-Control-Allow-Origin', '*'); // 手动去设置
res.send({
name:'aa',
age:20
})
})
图6.png
2、JSONP解决跨域问题
jsonp处理跨域的方法原理：后台返回的数据实际上还是一个json对象数据，但是前端在使用jsonp的时候会通过callback传递一个参数过去，这个参数值会为一个function的函数名作为脚本去执行。
// 模拟服务器A发送接口数据
app.get('/qryData', (req, res, next) => {
let { id } = req.query;
res.jsonp({
name: id,
age: Math.floor(Math.random() * 20 + 18)
})
})
网友评论