---

文章目录

• 前言
• 解决跨域的方法
• Express框架下设置跨域请求
  • cors安装包
  • 自定义中间件
  • 可能遇到的坑

---

前言

由于现在的项目都流行前后端分离,
导致后端部署服务和前端一定不会解析到一个服务上,
这样面临的就是跨域请求.
什么情况下会出现跨域请求点击查看这篇博文介绍.

解决跨域的方法

• nginx设置跨域请求头点击查看
• 服务端代码解决跨域

今天我们介绍后者,服务器端如何解决跨域.

Express框架下设置跨域请求

• cors安装包
• 自己定义中间件

cors安装包

npm install cors --save

使用

const cors = require('cors');
server.use(cors());

自定义中间件

项目 middlewares 文件夹下创建 cors.js

module.exports = (req, res, next) => {
  res.header({
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET,POST,PUT,DELETE',
    'Access-Control-Allow-Headers': 'X-Requested-With,content-type,Token',
    'Access-Control-Allow-Credentials': 'true'
  });
  next();
};

这个中间件的作用就是请求过来后,先设置请求头,允许跨域
使用和上面基本一致
统一引用中间件的index.js页面

module.exports = [
  require('./logger.js'),
  require('./cors.js'),
  require('./fail.js'),
  require('./success.js'),
  require('./pagination')
];

app.js文件中引用index.js文件

const middlewares = require('./middlewares');
app.use(middlewares);

可能遇到的坑

我们一般在api服务中一定有统一的拦截器,统一的错误页或者统一返回信息等等.
假如你的 cors文件引用在 拦截器后面:
api请求过来首先判断token是否有效,
如果有效 -> next()
如果无效 -> res.status(401) return 'unauth';
这种情况,如果前端跨域请求,直接拿到401状态,而且没有走到 cors引用,
导致浏览器屏蔽,其实服务器已经做了处理,只是因为同源策略,因为没有服务器返回的 'Access-Control-Allow-origin'="*",
导致浏览器屏蔽,相当于这个请求什么都没有做,xmlHttprequst直接报错.

所以在中间件执行顺序时,
先执行cors.js
再执行拦截器等等..
确保任何请求先加上 'Access-Control-Allow-origin'="*",以保证返回值可以被浏览器接收.

出自:node.js Express 框架下支持跨域服务