1.请求header设置
由于浏览器的同源策略,造成了许多的跨域操作无法完成。所以需要在服务端添加允许跨域和许多请求头的限制。如下
在端口8088和8888分别启动了一个服务,用8088启动的服务去请求8888的接口。报错如下:
这是浏览器发现端口号不对,拦截了请求。其实请求是已经成功了的。使用express框架中中间件的方式为每个请求设置允许跨域如下:
app.all("*", function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*"); //允许所有跨域请求
next();
})
请求可以正常发送接收了,然后在请求头中添加“xcors”,报错如下:
这是请求的预检测未通过,请求头中不允许携带未声明的变量。 设置允许添加xcors
app.all("*", function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-control-Allow-Headers", "xCors"); //允许请求头中携带 xCors
next();
})
请求头如下:
请求默认允许的方法只有GET, POST,HEAD。其他方法是不允许的
发送PUT请求,报错如下
设置允许声明的方法访问。
app.all("*", function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-control-Allow-Headers", "xCors");
res.header("Access-Control-Allow-Methods", "GET,POST,DELETE,PUT,OPTIONS,HEAD,FETCH");
next();
})
请求可以正常访问了。请求中除GET,POST,Head都需要发送预请求,通过设置一个最大允许时间,可以减少预请求的发送。
刷新页面,请求发送6个
设置Access-Control-Max-Age超时时间
app.all("*", function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-control-Allow-Headers", "xCors"); res.header("Access-Control-Allow-Methods", "GET,POST,DELETE,PUT,OPTIONS,HEAD,FETCH"); res.header("Access-control-max-age", 1000); //测试通过 next(); })刷新页面,请求变为4个,预请求都可以省了
1. app.js
var http = require('http');
var path = require('path');
var filter = require('./app_filter'); //url解析
var express = require('./node_modules/express');
var session = require('express-session'); //后台保存用户信息
var bodyParser = require('./node_modules/body-parser'); //后台获取传入的信息
var cookieParser = require('./node_modules/cookie-parser'); //浏览器保存信息
var app = express();
../代表上一级目录。
5.后台
session的保存与销毁
req.session.user = data.userInfo;
req.session.destroy();
返回页面求请求 :res.render('Index')即会加载Index.html
返回操作的状态信息:res.status(200).json({});
返回数据:res.send(data);目录结构