NodeJs扩展模块Express的使用(跨域访问)

中文网:http://www.expressjs.com.cn/
Express是一个基于nodejs中Http模块的web应用开发框架,用于简化请求消息的处理,以及响应消息的生成。

安装

$ npm install express --save

引入

const http =require('http');
const express=require('express');

创建一个服务,并设置服务端口号

//express本质就是一个请求处理函数
let app=express();
http.createServer(app).listen(3000);
//路由(route)=请求方法+请求地址+处理函数
app.get('/user/login',(req,res)=>{});
app.post('/user/login',(req,res)=>{});
app.put('/user/login',(req,res)=>{});
app.delete('/user/login',(req,res)=>{});

使用express向客户端返回响应消息

res.send('');
res.json(obj);

实例
先创建httpServer.js,这里开的是3000端口

const http =require('http');
const express=require('express');
//express本质就是一个请求处理函数
let app=express();
http.createServer(app).listen(3000);
//路由(route)=请求方法+请求地址+处理函数
app.get('/user/login',(req,res)=>{
    res.send('is login');
});

然后前端html,用的Apache,开的80端口

<button id="btn1">向服务器发送get请求</button>

$('#btn1').click(function () {
        $.ajax({
            type:'GET',
            url:'http://localhost:3000/user/login',
            success:function (data) {
                console.log(data)
            }
        })
    })

点击button报错了,因为访问端口不一致,想要解决这个问题就要用到跨域访问了
在这里插入图片描述
在这里插入图片描述
我们需要在服务端文件内加入响应头,来允许服务器访问这个域名

app.get('/user/login',(req,res)=>{
    res.set({
        'Access-Control-Allow-Origin':'http://localhost'
    }).send('is login');
});

再点击就可以了
在这里插入图片描述
post请求

$('#btn2').click(function () {
        $.ajax({
            type:'POST',
            url:'http://localhost:3000/user/list',
            data:{'uname':'tom','upwd':123},
            success:function (data) {
                console.log(data)
            }
        })
    })
app.post('/user/list',(req,res)=>{
    res.set({
        'Access-Control-Allow-Origin':'http://localhost'
    }).send('is list');
});

在这里插入图片描述
在这里插入图片描述
在发送put和delete请求时,就需要用到预检请求来处理
具体方法详情可见:https://blog.csdn.net/badmoonc/article/details/82706246
当发生符合非简单请求(预检请求)的条件时,浏览器会自动先发送一个options请求,如果发现服务器支持该请求,则会将真正的请求发送到后端,反之,如果浏览器发现服务端并不支持该请求,则会在控制台抛出错误,如下:
在这里插入图片描述
所以,我们需要在服务端文件中加入预检

app.options('/user',(req,res)=>{
    res.set({
        'Access-Control-Allow-Origin':'http://localhost',
        'Access-Control-Allow-Methods':'PUT,DELETE'
    }).end()
});

然后再执行我们的put和delete请求

app.put('/user',(req,res)=>{
    res.set({
        'Access-Control-Allow-Origin':'http://localhost'
    }).send('is update');
});
app.delete('/user',(req,res)=>{
    res.set({
        'Access-Control-Allow-Origin':'http://localhost'
    }).send('is delete');
});

在当我们请求时,会请求2次,一次发送的是
Request Method: OPTIONS
在这里插入图片描述
第2次发送的是我们真正需要的请求
Request Method: PUT
在这里插入图片描述

发布了56 篇原创文章 · 获赞 8 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/qq_44361433/article/details/89643088
今日推荐