什么是CORS？
默认情况下，为预防某些而已行为，浏览器的XHR对象只能访问来源于同一个域中的资源。但是我们在日常实际开发中，常常会遇到跨域请求的需求，因此就出现了一种跨域请求的方案：CORS（Cross-Origin Resource Sharing）跨域资源共享。
CORS背后的原理是：使用自定的HTTP头部与服务器进行沟通，从而由服务器决定响应是否成功。
了解下同源策略
为什么要跨域限制
跨域决解方案
CORS（跨域资源共享）
CORS简单使用
之前说得CORS跨域，嗯嗯，后端设置Access-Control-Allow-Origin：*|[或具体的域名]就好了；
第一次尝试：
app.use(async(ctx,next) => {
ctx.set({
"Access-Control-Allow-Origin": "http://localhost:8088"
})
发现有些请求可以成功，但是有些还是会报错：
请求被同源策略阻止，预请求的响应没有通过检查：http返回的不是ok?
并且发现发送的是OPTIONS请求:
发现：CORS规范将请求分为两种类型，一种是简单请求，另外一种是带预检的非简单请求
简单请求和非简单请求
浏览器发送跨域请求判断方式：
什么是简单请求
1、请求方法是如下之一：
2、所有的Header都只包含如下列表中（没有自定义header）：
除此之外都是非简单请求
CORS非简单请求配置须知
正如上图报错显示，对于非简单请求，浏览器会先发送options预检，预检通过后才会发送真是的请求；
发送options预检请求将关于接下来的真实请求的信息给服务器：
Origin：请求的源域信息
Access-Control-Request-Method：接下来的请求类型，如POST、GET等
Access-Control-Request-Headers：接下来的请求中包含的用户显式设置的Header列表
服务器端收到请求之后，会根据附带的信息来判断是否允许该跨域请求，通过Header返回信息：
Access-Control-Allow-Origin：允许跨域的Origin列表
Access-Control-Allow-Methods：允许跨域的方法列表
Access-Control-Allow-Headers：允许跨域的Header列表,防止遗漏Header，因此建议没有特殊需求的情况下设置为*
Access-Control-Expose-Headers：允许暴露给JavaScript代码的Header列表
Access-Control-Max-Age：最大的浏览器预检请求缓存时间，单位为s
CORS完整配置
koa配置CORS跨域资源共享中间件：
const cors = (origin) => {
return async (ctx, next) => {
ctx.set({
"Access-Control-Allow-Origin": origin, //允许的源
})
// 预检请求
if (ctx.request.method == "OPTIONS") {
ctx.set({
'Access-Control-Allow-Methods': 'OPTIONS,HEAD,DELETE,GET,PUT,POST', //支持跨域的方法
'Access-Control-Allow-Headers': '*', //允许的头
'Access-Control-Max-Age':10000, // 预检请求缓存时间
// 如果服务器设置Access-Control-Allow-Credentials为true，那么就不能再设置Access-Control-Allow-Origin为*,必须用具体的域名
'Access-Control-Allow-Credentials':true // 跨域请求携带身份信息(Credential，例如Cookie或者HTTP认证信息)
});
ctx.send(null, '预检请求')
} else {
// 真实请求
await next()
}
}
}
export default cors
现在不管是简单请求还是非简单请求都可以跨域访问啦～
跨域时如何处理cookie
cookie：
问题：
决解：
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对亿速云的支持。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
