node.js--中间件AND跨域

最新推荐文章于 2024-05-16 15:49:34 发布

_筱龙

最新推荐文章于 2024-05-16 15:49:34 发布

阅读量285

点赞数

文章标签： nodejs

本文链接：https://blog.csdn.net/IT_qslong/article/details/107213987

版权

一、中间件

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

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

并且这个函数里可以操作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请求没有跨域限制来获取资源

浏览器当前打开的页面地址，和页面发送ajax请求的地址不同源，就会出现跨域问题
script标签里的src属性发送请求是没有跨域限制
link标签的href属性发送也没有跨域问题
script标签请求回来的东西，都会当作js执行
把事先准备好的函数名，传递给要访问的后端接口

<!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('服务器开启了');
    
})

_筱龙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
node.js--中间件AND跨域

一、中间件简单来说，中间件就是一个函数在服务器开启之后和在路由响应之前，执行的一个函数，可以在这个中间件函数里边做我们想做的事并且这个函数里可以操作req，resnext()函数的意思是：执行下一个中间件（执行下一步操作，没有的话不往下执行）var express = require('express')var app = express()// 中间件app.use((req, res, next) => { console.log('LOGGED1') nex
复制链接

扫一扫