node.js跨域解决方案之CORS,学会了防止后端甩锅★.★！

Cors解决跨域【Cross Origin Resource Sharing】

CORS英文翻译为跨域资源共享

CORS中间件的封装

遇到过后端跟前端因为一个而怼起来.小伙伴们我们学了CORS封装就再也不担心,后端不给我们加啦
CORS中间件封装小常识

// req.get("Origin"")这个方法是获取请求者的域名
    // allwo_origin.includes(req.get("host"))这段代码的意思就是如果请求的域名包含在allwo_origin数组中
    // 思路就是如果请求者的域名是我们是想给的域名那么就允许跨域,否则不允许跨域

CORS初级封装（任何域名都可以访问接口的版本）

这个版本,是小白偷懒的好封装,但是考虑到企业服务器压力,小伙伴们最好不要捡了芝麻丢了西瓜哟。

1.	// CORS→Cross Origin Resource Sharing
2.	function corsky(req,res,next){
3.	    // 设置可以用如下三行的写法即三个res.header,也可以用对象去写即res.set({}).二选一即可
4.	    // res.header("Access-Control-Allow-Origin", "*");
5.	    // res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
6.	    // res.header("Access-Control-Allow-Methods","PUT,POST,GET,PATCH,DELETE,OPTIONS");
7.	    res.set({
8.	        "Access-Control-Allow-Origin":"*",
9.	        "Access-Control-Allow-Headers":"Content-Type,Content-Length, Authorization, Accept,X-Requested-With",
10.	        "Access-Control-Allow-Methods":"PUT,POST,GET,PATCH,DELETE,OPTIONS",
11.	    })
12.	    // 跨域请求CORS中的预请求
13.	    if(req.method=="OPTIONS") {
14.	        res.sendStatus(200);/*让options请求快速返回*/
15.	    } else{
16.	        next();
17.	    }
18.	}
19.	// corsky:表示cors跨域
20.	module.exports={corsky}

CORS中间件之高级封装

3

.	// CORS→Cross Origin Resource Sharing
4.	const allwo_origin = ["http://localhost:2003", "http://localhost:3001"]
5.	
6.	function corsky(req, res, next) {
7.	    // 设置可以用如下三行的写法,也可以用对象去写即res.set({}).二选一即可
8.	    // res.header("Access-Control-Allow-Origin", "*");
9.	    // res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
10.	    // res.header("Access-Control-Allow-Methods","PUT,POST,GET,PATCH,DELETE,OPTIONS");
11.	    // req.get("host")这个方法是获取请求者的域名
12.	    // allwo_origin.includes(req.get("host"))这段代码的意思就是如果请求的域名包含在allwo_origin数组中
13.	    // 思路就是如果请求者的域名是我们是想给的域名那么就允许跨域,否则不允许跨域
14.	    console.log("请求者域名Origin:", req.get("Origin"));
15.	    console.log(allwo_origin.includes(req.get("Origin")));
16.	    // req.get()这个方法,获取的是控制台Network，里面的属性名为Origin的属性值,还可以获取属性名为host的属性值
17.	    if (allwo_origin.includes(req.get("Origin"))) {
18.	        res.set({
19.	            "Access-Control-Allow-Origin": "*",
20.	            "Access-Control-Allow-Headers": "Content-Type,Content-Length, Authorization, Accept,X-Requested-With",
21.	            "Access-Control-Allow-Methods": "PUT,POST,GET,PATCH,DELETE,OPTIONS",
22.	        })
23.	        // 跨域请求CORS中的预请求
24.	        if (req.method == "OPTIONS") {
25.	            res.sendStatus(200); /*让options请求快速返回*/
26.	        } else {
27.	            next();
28.	        }
29.	    } else {
30.	        // 401表示服务器限值你访问
31.	        res.send("401")
32.	    }
33.	
34.	}
35.	// corsky:表示cors跨域
36.	module.exports = {
37.	    corsky
38.	}

明白了CORS的封装以后,我们就开始使用啦！

// CORS→Cross Origin Resource Sharing
function corsky(req,res,next){
    // 设置可以用如下三行的写法即三个res.header,也可以用对象去写即res.set({}).二选一即可
    // res.header("Access-Control-Allow-Origin", "*");
    // res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
    // res.header("Access-Control-Allow-Methods","PUT,POST,GET,PATCH,DELETE,OPTIONS");
    res.set({
        "Access-Control-Allow-Origin":"*",
        "Access-Control-Allow-Headers":"Content-Type,Content-Length, Authorization, Accept,X-Requested-With",
        "Access-Control-Allow-Methods":"PUT,POST,GET,PATCH,DELETE,OPTIONS",
    })
    // 跨域请求CORS中的预请求
    if(req.method=="OPTIONS") {
        res.sendStatus(200);/*让options请求快速返回*/
    } else{
        next();
    }
}
// corsky:表示cors跨域
module.exports={corsky}

使用文件

var express = require("express")
const app = express()
// 引入使用时注意结构
var {corsky}=require("./cors代理")
app.use(corsky)
app.get("/corsky", (req, res) => {
    res.send(req.query)
})
app.listen(3050, () => {
    console.log("3050服务器端口成功开启！");
})

Cors解决跨域【Cross Origin Resource Sharing】

CORS英文翻译为跨域资源共享
除了自己封装还可以通过第三方中间件→cors中间件解决跨域问题
操作步骤如下👇
第一先下载cors第三方中间件npm i cors
然后在你需要解决跨域问题的node.js接口内添加如下两行代码,就可以解决跨域的问题啦。

var cors=require("cors")
const app = express()
app.use(cors())

第三方CORS中间件无法限制那个域名可以访问我们的接口