Node express设置响应头解决跨域

第一步搭建好环境

• yarn add express 安装node服务器快速搭建框架express

设置请求头的方式只能解决get请求的跨域 ，post请求想要实现跨域 需要使用cors插件

开始编写服务器代码

const express = require('express'); // 引入express
const app = express(); // 创建express实例

app.listen( 8080 , 'localhost' , () => { // 配置服务器端口 地址
    console.log('http://localhost:8080');
})

app.use( ( request , response , next ) => {
    response.header( 'Access-Control-Allow-Origin' , '*') // 跨域最重要的一步 设置响应头
    next(); // 执行next函数执行后续代码
})

// 接受 /index post请求 返回一个对象
app.post( '/index' , ( request , response ) => {
    console.log(request.body);
    response.send({
        code : 200,
        msg : '请求成功'
    })
})

封装ajax请求

const GetIndex = ( api , type , data ) => {
    $.ajax({
        url : 'http://localhost:8080'+ api, // 设置请求地址
        type : type, // 设置请求类型
        data : data, // 设置请求携带的参数
        success : response => { // 成功的回调函数
            successfn(response) // 调用外面的函数将数据传递出去
        }
    })
}

调用请求

GetIndex( '/index' , 'POST' , { id : '12' , name : 'xiaozhi'} ) 

    function successfn(res){
        console.log(res);
        let h1 = document.createElement('h1');
        h1.innerText = res.msg;
        document.body.appendChild(h1);
    }

最终结果

image.png

相比较设置响应头 更好的办法是使用cors插件

yarn add cors 先下载cors插件

const express = require('express');
let app = express();
const bodyParser = require('body-parser');
const cors = require('cors'); // 引入cors插件

app.listen( 9090 , 'localhost' , () => {
    console.log(' http://localhost:9090 ');
})

// app.use('/' , express.static('./src'));
// app.use( ( request , response , next ) => {
//     response.header('Access-Control-Allow-Origin' , '*');
//     next();
// })
app.use(cors()) // 通过中间件的方式使用cors插件 解决跨域问题
app.use(bodyParser.urlencoded( { extended : false }));

app.post('/index' , ( request , response ) => {
    console.log(request.body);
    response.send({
        code : 200,
        msg : '请求成功',
    })
})

app.get( '/page' , ( request , response ) => {
    console.log(request.query);
    response.send( {
        code : 200 ,
        msg : '请求成功'
    })
})