使用中间件解决跨域问题

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情

使用中间件解决跨域问题

• npm是express的一个第三方中间件，通过安装和配置CORS中间件，可以很方便地解决跨域问题

两句话解决跨域

1. npm install cors 安装中间件
2. const cors = require('cors')导入中间件
3. 路由之前调用app.use(cors()) 配置中间件

什么是CORS

cors由一系列HTTP响应头组成，这些HTTP响应头决定浏览器是否组织前端JS代码跨域获取资源。 浏览器的同源安全策略，会默认组织页面跨域获取资源。但是如果接口服务器配置了CORS相关的HTTP响应头，就可以解除浏览器端的跨域访问限制。

注意事项

• cors主要在服务器端进行配置。客户端浏览器无须做任何额外的配置，即可请求哪些开启了CORS的服务端接口。
• cors在浏览器中有兼容性。只支持XMLhttpRequest Level2的浏览器，磁能正常访问开启了CORS的服务端接口

都有哪些响应头

Access-Control-Allow-Origin

可以控制Origin参数的值指定到某URL，只允许来自该URL的访问

const express = require('express')
const router = express.Router()
res.setHeader('Access-Control-Allow-Origin','http:/xxx.cn')
router.use(function(req,res,next){
console.log('time',Date.now())
next()
})

module.exports = router

如果要设置允许来自任何域的请求可以使用通配符*来表示允许任何域的请求

const express = require('express')
const router = express.Router()
res.setHeader('Access-Control-Allow-Origin','*')
router.use(function(req,res,next){
console.log('time',Date.now())
next()
})

module.exports = router

Access-Control-Allow-Methods

默认情况下，CORS仅支持客户端发起的GET、POST、HEAD请求。 如果客户端希望通过put，delete等方式请求服务器的资源，则需要在服务器端，通过Access-Control-Allow-Methods方法来芝麻实际请求允许使用的http方法。

//只允许这几种方法
res.setHeader('Access-Control-Allow-Methods','GET,POST,HEAD')
//允许使用所有的HTTP请求方法
res.setHeader('Access-Control-Allow-Methods','*')