[Node.js] 模块化 -- 中间件和跨域

IP地址和域名

 
 

中间件

什么是中间件

是服务器开启之后和路由响应之前执行的一个函数
编写用于Express应用程序的中间件
 

中间件功能执行的任务

• 执行任何代码。
• 对请求和响应对象进行更改。
• 结束请求-响应周期。
• 调用堆栈中的下一个中间件
   

示例代码

如果当前的中间件功能没有结束请求响应周期，则必须调用next()将控制传递给下一个中间件函数。否则，请求将被搁置

 
 

跨域

跨域固定报错格式

只要是出现跨域问题，浏览器就会出现一个固定格式(没有之一)的报错信息

'Access Control-Allow-0rigin'

 

什么是跨域

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

• (1) ajax :浏览路只有使用ajax发送请求才会出现跨域。href属性 与src属性不会出现跨域
• (2)接口地址: ajax请求的url
• (3)打开的页面:当前页面的window.location.href
• (4)不同源:浏览器使用ajax,向不同源的接口发送请求，称之为跨域访问

 

同源和不同源

同源      协议和地址和端口都-样
不同源  协议/地址/端口只要有一个不同就不同源

 

为什么要有同源和不同源

• 出于安全考虑，浏览器不允许，页面向不同源的接口请求数据，因为如果接口和网页不同源，浏览器认为是2个不同的服务器，
• 不同的服务器中内容是不可控的，不允许访问了
• 总结说人话:浏览器为了保护你的电脑安全

 

解决跨域问题

设置响应头(允许资源被访问/共享)

Access-Control-Allow-0rigin

//  * 表示所有的请求路径都可以请求这个接口
res.setHeader('Access-Control-Allow-0rigin','*');

 

利用中间件

使用中间件的方式来设置资源共享，这样的话就不用在每一个接口中设置了

app. use((req, res,next)=> {
    res.setHeader('Access-Control-Allow-0rigin','*');
    next();
})

 

使用第三方模块

用于提供连接/特快可用于启用     CORS    有各种各样的选择

var cors = require('cors')
app.use(cors())

 
 

jsonp

jsonp原理

1.浏览器页面上使用ajax发请求，当前页面地址和ajax请求的地址不同源，才有跨域限制.
2.是script标签的src属性发的请求，img的src属性发的请求，link标签的href发的请求，都是没有跨域限制的

• html

<script>
    //准备一个fn函数
    function fn() {
        console.log('准备一个fn函数');
    }

    //事先准备好了一个fnsb的函数
    function fnsb() {
        console.log('事先准备好了一个fnsb的函数');
    }
</script>
<!--3.script标签的src请求回来的内容，都会当做js来执行-->
<script src="http://127.0.0.1:8086/all?callback=fnsb"></script>

• JavaScript

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

app.get('/all', (req, res) => {
    // res.send("console.log( '服务器开启了')")
    // res.send('fn()')

    //现在有一个问题，就是返回的这个函数调用，我这里怎么知道应该返回什么样的函数名呢?
    //或者说我这里怎么知道访问我这个接口的前端页面有什么样的写好的函数呢?
    //所以这里写死返回fn() 不合理.
    // 解决办法是，前端把已经准备好的函数名用参数的形式给带过来.
    console.log(req.query.callback);//这里就可以拿到前端传递过来的事先准备好的函数名.
    res. send(`${ req.query.callback}()`)
})

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

 

用jsonp解决跨域

动态创建一个script标签
把script添加到body中使用

• html

<script>
    function sb(backData) {
        // 接收后端的数据
        console.log(backData);
    }
    //给按钮设置一个点击事件
    $('#btn').on('click', function () {
        // 1. 动态创建一个script标签
        var script1 = document.createElement('script')
        $(script1).attr('src', 'http://127.0.0.1:8089/all?callback=sb')
        // 2. 把script添加到body中使用
        $('body').append(script1)
    })
</script>

• JavaScript

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

app.get('/all', (req, res) =>{
    // 这个接口需要返回给前端的数据是:{"name”:"子丰兄”, "age" :28}

    res.send(`${req.query.callback}({"name":"子丰兄", "age" :28})`)
})

app.listen(8089, () => {
    console.log(`服务器开启了`)
})

 

请求聚合数据的一个笑话接口

• html

<script src="./jquery-1.12.4.min.js"></script>
<script>
    function sb(backData) {
        // 接收后端的数据
        console.log(backData);
    }
    $('#btn').on('click', function () {
        $.ajax({
            url: 'http://v.juhe.cn/joke/content/list.php',
            data:{
                sort:'asc',
                pagesize:5,
                time :'1418816972',
                key: ' d6f8740a12650134412675cc513e7c53'
            },
            dataType: 'jsonp',
            success: function (backData) {
                console.log(backData);
            }
        })
    })
</script>

• JavaScript

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

app.get('/all', (req, res) =>{
    // 这个接口需要返回给前端的数据是:{"name”:"子丰兄”, "age" :28}

    res.send(`${req.query.callback}({"name":"子丰兄", "age" :28})`)
})

app.listen(8089, () => {
    console.log(`服务器开启了`)
})