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

Banshee

跨域说的太多了,这里不再解释,浏览器web的同源策略造成的,目前跨域前端和后端都是可以解决的,今天主要说后端常用的解决办法
CORS:W3C的标准技术,主要全称是Cross-Origin Resource Sharing,中文叫跨域资源共享技术,官网:'https://www.w3.org/TR/cors/',如果你要看这个官网的解释,可以看看下面的这个,122.png简单解释就是当代浏览器会将跨站点异步访问的权限交给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请求,看图:
]J1CMNU${00{F()Y7)L1E38.png

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

阅读 9.6k

To die is to die, to live is to suffer

90 声望
4 粉丝
0 条评论
你知道吗?

To die is to die, to live is to suffer

90 声望
4 粉丝
宣传栏