全栈：CORS

什么是CORS

全称Cross-Origin Resource Sharing  ，是一种允许当前域（domain）的资源（比如html/js/web service）被其他域（domain）的脚本请求访问的机制，通常由于同域安全策略（the same-origin security policy）浏览器会禁止这种跨域请求。

CORS的原理

1、在数据包的头部配置Access-Control-Allow-Origin字段，并发送给浏览器
2、浏览器根据配置信息，判断是否允许让服务器的网页进行Ajax跨域访问

在实际生产或者项目开发阶段 ，需要跨域访问资源，跨域在后端发送数据包时 ，在数据包的头部配置这个数据包被跨域请求时的跨域资源共享白名单
也就是res.setHeader("Access-Contrl-Allow-Origin"),最后一个单词可以改为method

 

CORS跨域资源共享

Cors允许浏览器向跨域服务器发出XmlHttpRequest请求，另外 CORS还支持get，post，head请求

 

在数据包的头部配置Access-Control-Allow-Origin字段以后,数据包发送给浏览器后,浏览器就会根据这里配置的白名单 "放行" 允许白名单的服务器对应的网页来用ajax跨域访问

ps:

1、跨域请求 时  前端是请求了跨域的后端,只是返回的数据被浏览器拒收了,并不是跨域了就不发网络请求

2、请求头的Origin还能是其他字段：

• Access-Control-Request-Method
• Access-Control-Request-Headers
• Access-Control-Allow-Origin
• Access-Control-Allow-Credentials

//后端设置数据包配置 允许跨域资源共享 res.setHeader('Access-Control-Allow-Origin','*')

 

egg-cors

//1.下载
cnpm i --save egg-cors

//2.开启插件
// config/plugin.js文件
cors:{
enable: true,
package: 'egg-cors',
}
//3.配置插件
// config/config.default.js文件
config.cors = {
origin: '*',
allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH'
}

//默认origin只支持一个域名或者*表示全部，如果想支持具体的多个指定域名可以如下设置：
config.cors = {
// origin: ['http://localhost'],
origin:function(ctx) { //设置允许来自指定域名请求
console.log(ctx);
const whiteList = ['http://www.baidu.com','http://www.heidu.com'];
let url = ctx.request.header.origin;
if(whiteList.includes(url)){
return url;
}
return 'http://localhost' //默认允许本地请求可跨域
},
allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH'
};


//4.使用:
//router.js文件
router.get('/cors',controller.home.cors)
//home.js文件
async cors(){
this.ctx.body={info:"这个接口可以通过跨域访问"}
}


5. 注意:跨域前端请求时需要携带跨域凭证,不然缓存会失效

前端网络请求时配置:
原生ajax:
xhr.withCredentials = true;

axios:
axios.post(url,{},{withCredentials:true}).then((res)=>{})

后端配置:
config.cors = {
origin: '具体的ip和端口 不能写* ',
credentials:true
}