node 的 express框架解决跨域问题的方法

Express 框架解决跨域问题

1. 当我们在浏览器的console控制台中看到类似如下的信息：

   Access to XMLHttpRequest at 'http://localhost:3001/books' from origin 'http://localhost:63342'
   has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
   

   这表示存在着跨域问题。解决的办法就是在拦截每个请求的路由上添加'Access-Control-Allow-Origin' header。
2. 下面是node express框架解诀跨域问题的代码，注意解决跨域的代码要放在处理路由的代之前，否则将会不起作用：

   //===== 项目入口文件 =====
   const express = require('express');
   const app = express();
   const bodyParser = require('body-parser');
   const router = require('./router');
   
   //----- 配置跨域 -----
   // express框架解决跨域问题的代码，注意该代码要放在 app.use(router); 之前
   app.all('*', (req, res, next) => {
       res.header("Access-Control-Allow-Origin", "*");
       res.header("Access-Control-Allow-Headers", "X-Requested-With");
       res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
       res.header("X-Powered-By", 'Express');
       res.header("Content-Type", "application/json;charset=utf-8");
       next();
   });
   
   //----- 配置路由 -----
   app.use(router);
   
   //----- 配置参数解析-----
   app.use(bodyParser.urlencoded({extended:true}));
   app.use(bodyParser.json());
   
   //----- 监听端口 -----
   const port = process.env.port || 3001;
   app.listen(port,(error) => {
       console.log(`server running on ${port}`);
   });