Node设置cors,后端解决跨域问题

跨域说的太多了,这里再也不解释,浏览器web的同源策略形成的,目前跨域前端和后端都是能够解决的,今天主要说后端经常使用的解决办法
CORS:W3C的标准技术,主要全称是Cross-Origin Resource Sharing,中文叫跨域资源共享技术,官网:'https://www.w3.org/TR/cors/',若是你要看这个官网的解释,能够看看下面的这个,简单解释就是当代浏览器会将跨站点异步访问的权限交给CORS来处理解决跨域问题,一般有两种设置方式,本文案例以node为例子,上代码

方式一:直接使用npm里面的cors包,简单粗暴.

**安装包  npm install cors  -S**


const app=express();//基于node里面的express服务器

//我这边使用了中间件
var cors=require("cors");

app.use(cors()); 

//后面的代码会引入我后端的接口,相似于一个react.js,经过express路由引入后,服务端接口配置完毕,此方式太暴力,解决了全部请求头和方式设置的繁琐问题,缺点如何要携带cookie这种方式显然不适合

方式二:也是基于express中间件设置,只不过会设置具体请求头,请求方式,能够携带Cookie.

const express = require('express')

const app = express();

app.use((req, res, next) => {
//判断路径
  if(req.path !== '/' && !req.path.includes('.')){
    res.set({
      'Access-Control-Allow-Credentials': true, //容许后端发送cookie
      'Access-Control-Allow-Origin': req.headers.origin || '*', //任意域名均可以访问,或者基于我请求头里面的域
      'Access-Control-Allow-Headers': 'X-Requested-With,Content-Type', //设置请求头格式和类型
      'Access-Control-Allow-Methods': 'PUT,POST,GET,DELETE,OPTIONS',//容许支持的请求方式
      'Content-Type': 'application/json; charset=utf-8'//默认与容许的文本格式json和编码格式
    })
  }
  req.method === 'OPTIONS' ? res.status(204).end() : next()
})

补充一点OPTIONS:OPTIONS方法是用于请求得到由Request-URI标识的资源在请求/响应的通讯过程当中可使用的功能选项。经过这个方法，客户端能够在采起具体资源请求以前，决定对该资源采起何种必要措施，或者了解服务器的性能,咱们常见的请求就是get或者post,那么哪里查看options请求,看图:

至于后端是Java或者php,也是同样能够用这种方式设置的,只是写法不一样