nodejs+express在浏览器上进行请求数据时，遇到跨域问题解决方案-cors插件

跨域问题 

一、使用cors插件快速解决

安装：npm i cors

let express = require('express')
let cors = require('cors')
let app = express()

//使用cors允许浏览器端进行跨域
app.use( cors() )

app.get('/api/products',(req,res)=>{
    res.send({
        ...
    })
})

 二、自己添加响应头解决方案

//设置跨域请求
app.all('*', function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By", ' 3.2.1')
  res.header("Content-Type", "application/json;charset=utf-8");
  next();
});

完整代码

var express = require('express');
var md5 = require('js-md5');
var app = express();
var bodyParser = require('body-parser');
app.use(bodyParser.json({
  limit: '1mb'
}));
app.use(bodyParser.urlencoded({
  limit: '1mb',
  extended: true
}));
var DatabaseOperation = require('./connection');
 
//引用bodyParser
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: true
}));
//设置跨域请求
app.all('*', function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By", ' 3.2.1')
  res.header("Content-Type", "application/json;charset=utf-8");
  next();
});
 
//用户注册
app.get('/api/user/register', function (req, res) {
  DatabaseOperation.select('user', {
    "username": req.query.username,
  }, function (result) {
    if (result.length > 0) {
      result = {
        code: '1001'
      }
      res.json(result);
    } else {
      DatabaseOperation.insert('user', [{
        "username": req.query.username,
        "password": md5(req.query.password)
      }], function (result) {
        res.json(result)
      });
    }
  });
});
 
const port = 8080;
app.listen(port, () => {
  console.log('Express server listening on port ' + port);
});
connection.js

知识点

接下来了解一下响应头是什么（只说明上边的几个，其他自行了解）：

上边的设置，在前端请求后端接口的时候，就会用到：

Access-Control-Allow-Headers:Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild ：响应首部，用于预检请求中，代表将会在正式请求的Access-Control-Expose-Headers 字段中出现的首部信息。
其中：
Content-Type： 实体头部用于指示资源的MIME类型 media type 。
在响应中，Content-Type标头告诉客户端实际返回的内容的内容类型。浏览器会在某些情况下进行MIME查找，并不一定遵循此标题的值; 为了防止这种行为，可以将标题 X-Content-Type-Options 设置为 nosnif
Authorization ：请求头含有服务器用于验证用户代理身份的凭证。
Accept ：请求头用来告知客户端可以处理的内容类型
Access-Control-Allow-Origin:* ： 响应头指定了该响应的资源是否被允许与给定的origin共享，对于不需具备凭证（credentials）的请求，服务器会以“*”作为通配符，从而允许所有域都具有访问资源的权限。或者也可以指定进行限制
Content-Length :74 : 表明了实体主体部分的大小（单位是字节）
Access-Control-Allow-Methods：PUT,POST,GET,DELETE,OPTIONS：服务器端允许的请求方式，常用get、post

Date: 其中包含了报文创建的日期和时间。格式：

Date: <day-name>, <day> <month> <year> <hour>:<minute>:<second> GMT

<day-name>
"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", 或 "Sun" 之一 （区分大小写）。
<day>
2位数字表示天数，例如， "04" 或 "23"。
<month>
"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" 之一（区分大小写）。
<year>
4位数字表示年份，例如， "1990" 或 "2016"。
<hour>
2位数字表示小时数，例如， "09" 或 "23"。
<minute>
2位数字表示分钟数，例如， "04" 或 "59"。
<second>
2位数字表示秒数，例如， "04" 或 "59"。
GMT
格林尼治标准时间。 在HTTP协议中，时间都是用格林尼治标准时间来表示的，而不是本地时间。
Content-Type:application/json; charset=utf-8： 说明实体内对象的媒体类型。
HTTP响应头是资源的特定版本的标识符。这可以让缓存更高效，并节省带宽，因为如果内容没有改变，Web服务器不需要发送完整的响应。而如果内容发生了变化，使用ETag有助于防止资源的同时更新相互覆盖（“空中碰撞”）。
ETag：如果给定URL中的资源更改，则一定要生成新的Etag值。 因此Etags类似于指纹，也可能被某些服务器用于跟踪。 比较etags能快速确定此资源是否变化，但也可能被跟踪服务器永久存留。
X-Powered-By: 3.2.1 : 这个查了半天没找到一个合理的解释，出于安全考虑一般会隐藏，不过使用express会自动暴露，于是就手动修改：

默认：

默认暴露我们使用的框架是express

这样隐藏掉：

 res.header("X-Powered-By", ' 3.2.1')