一、中间件

简单来说，中间件就是一个函数

在服务器开启之后和在路由响应之前，执行的一个函数，可以在这个中间件函数里边做我们想做的事

并且这个函数里可以操作req，res

next()函数的意思是：执行下一个中间件（执行下一步操作，没有的话不往下执行）

var express = require('express')
var app = express()

// 中间件
app.use((req, res, next) => {
    console.log('LOGGED1')
    next()
})

app.use((req, res, next) => {
    console.log('LOGGED2')
    next()
})

app.get('/', (req, res) => {
    res.send('hello world')
})

app.listen(4399, () => {
    console.log('服务器开启了');
    
})

二、跨域

只要是出现跨域问题，浏览器就是出现一个固定错误的报错信息

Access to XMLHttpRequest at 'http://127.0.0.1:4399/login' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

就是这句话表明出现了跨域问题

1、什么是跨域？

浏览器使用ajax时，如果请求的接口地址和当前打开的页面地址不同源称之为跨域

例如：

  • 接口地址：Request URL: http://127.0.0.1:4399/login
  • 页面地址：[file:///F:/Change%20Class/Git/li_yanbin/2020-07/20200704/heroManager/www/login.html](file:///F:/Change Class/Git/li_yanbin/2020-07/20200704/heroManager/www/login.html)

这两地址都可以访问HTML页面

2、什么是同源？

同源：两个url地址的协议、地址、端口都一样

  • 协议：http，https，file
  • 主机：域名或者ip地址（127.0.0.1）
  • 端口：3000,4399···

不同源：两个url地址的协议、地址、端口只要有一个不一样，就是不同源

3、解决方案

第一种：CORS

目前的主流方案，最简单，直接让后端设置响应头，允许资源共享就好了

eg：在node.js中设置：*res*.setHeader('Access-Control-Allow-Origin','*')就行。

*号的意思是表示所有的路径都可以请求这个地址

eg：或者导入第三方模块cors，效果跟上面的一样

可以以中间件的方式设置该响应头

第二种：jsonp

曾经的跨域杀手，现在慢慢淡出历史舞台

jsonp是前后端来配合使用的

使用原理：通过动态创建script标签，通过script标签的src请求没有跨域限制来获取资源

  1. 浏览器当前打开的 页面地址，和页面发送ajax请求的地址不同源，就会出现跨域问题
  2. script标签里的src属性发送请求是没有跨域限制
  3. link标签的href属性发送也没有跨域问题
  4. script标签请求回来的东西，都会当作js执行
  5. 把事先准备好的函数名，传递给要访问的后端接口
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="6、jsonp解决跨域.js"></script>
    <script>
        //事先准备好的函数
        //backData就是后端通过参数传递过来的
        function fnsb(backData) {
            console.log('这是一个fnsb函数')
            console.log(backData)
        }
    </script>
</head>
<body>
    //把事先准备好的函数名，传递给要访问的后端接口
    <script src="http:127.0.0.1:8086/all?callback=fnsb"></script>
</body>
</html>

后端接口：

const express = require('express')
const app = express()

app.get('/all', (req, res) => {
    // 在后端，需要返回给前端的内容数据
    // {'name':'lyb','age':18}

    // 相当于实参的方式，返回给需要返回的数据
    res.send(`${req.query.callback}({'name':'lyb','age':18})`)
})
app.listen(8086, () => {
    console.log('服务器开启了');
    
})