nodejs服务端解决跨域问题

首先我先简单模拟一下跨域

首先写一个前端登陆页面和js代码（里面我封装了一个ajax请求方法，这个不是重点）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>
<body>
<button id="login">登录</button>
<script src="../script/code.js"></script>
</body>
</html>

/**
 * method默认为get
 * async默认为true，即请求为异步
 * data默认为空
 * **/
let ajax = function (method = 'get', url, async = true,data = null){
    // 创建xhr对象
    let xhr = new XMLHttpRequest()
    // 创建一个HTTP请求
    xhr.open(method, url, async)
    // setRequestHeader必须放在open和send中间
    xhr.setRequestHeader("Content-type", "application/json");
    xhr.send(data)
    xhr.onload = function (){
        console.log('请求')
    }
    xhr.onloadstart = function () {
    }
    xhr.onloadend = function () {
    }
    xhr.onreadystatechange = function (){
        if (xhr.readyState === 3){
        }
        if (xhr.readyState === 4){
        }
    }
    xhr.onprogress = function (event){
        console.log("onprogress")
    }

}

const dom = document.getElementById('login')
dom.addEventListener('click',()=>{
    let data = {
        username:'test',
        password:'test'
    }
    let url = 'http://127.0.0.1:80/api/login'
    ajax('post', url,  data)
})

接下来是服务端代码：

const express = require("express")

const app = express()

app.use(express.urlencoded({ extended: true }))


app.get('/getInfo', (req, res)=>{
    const query = req.query
    let data = {
        status:0,
        msg:'get请求成功',
        data:query
    }
    res.send(data)
})

app.post('/login', (req, res)=>{
    const body = req.body
    let data = {
        status:0,
        msg:'登陆成功',
        data: body
    }
    res.send(data)
})

app.listen(80,()=>{
    console.log("已访问")
})

当我点击登陆时，出现如下错误，看关键字has been blocked by CORS policy：，这表明出现跨域了。（从63342到80端口）在这里插入图片描述

解决方法

一、使用cors中间件解决跨域问题。

运行npm install cors安装中间件
使用const cors = require（‘cors’）导入中间件
调用app.use（cors（））配置中间件

相比于之前的代码，加了如下两行。

在这里插入图片描述之后就可以访问到了。

二、在服务端配置响应头

分别设置如下三个响应头

res.header("Access-Control-Allow-Origin","*");
res.header("Access-Control-Allow-Methods","PUT,GET,POST,DELETE,OPTIONS");
res.header("Access-Control-Allow-Headers","Content-Type");

最后代码如下：

const express = require("express")
// const cors = require('cors')
const app = express()

app.use(express.urlencoded({ extended: true }))
// app.use(cors())

// 设置允许跨域访问该服务
app.all('*',function(req,res,next){
    console.log(res)
    // console.log(req)
    res.header("Access-Control-Allow-Origin","*");
    res.header("Access-Control-Allow-Methods","PUT,GET,POST,DELETE,OPTIONS");
    // res.header("Access-Control-Allow-Headers","X-Requestd-With");
    res.header("Access-Control-Allow-Headers","Content-Type");
    next()
});

app.get('/getInfo', (req, res)=>{
    const query = req.query
    let data = {
        status:0,
        msg:'get请求成功',
        data:query
    }
    res.send(data)
})

app.post('/login', (req, res)=>{
    const body = req.body
    let data = {
        status:0,
        msg:'登陆成功',
        data: body
    }
    res.send(data)
})

app.listen(80,()=>{
    console.log("已访问")
})

经过这样设置即可完成跨域请求配置。