ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
>[danger] CORS --- CORS是一个W3C标准,全称是"跨域资源共享" 它允许浏览器向跨源服务器,发出`XMLHttpRequest`请求,从而克服了AJAX只能同源使用的限制 >[info]支持情况 --- 浏览器和服务器同时支持CORS, IE10+ >[info] 简单请求 --- 请求方法: * GET * POST * HEAD 请求头 * Accept * Accept-Language * Content-Language * Last-Event-ID * Content-Type:只限于三个值`application/x-www-form-urlencoded`、`multipart/form-data`、`text/plain` 1. 浏览器请求跨域资源, 请求是成功的, 看图 ![](https://img.kancloud.cn/8f/ac/8facb450fe85630b02fd92b72320dd01_964x313.png) 2. 浏览器会在请求头添加Origin字段, 表明自己所在(协议+域名+端口), 服务器根据这个值来决定是否同意本次请求, 浏览器会接收到200正确的HTTP状态码 * 同意需要开启: 响应头:Access-Control-Allow-Origin: 同意链接的域名(*代表所有) * 不设置, 就是不同意跨域访问 3. Ajax可以捕获异常, 抛出跨域请求的错误 ![](https://img.kancloud.cn/69/c3/69c3de68fffeb7eef8bc59aaebee2672_1314x163.png) 4. 除非后台, 设置响应头res.header("Access-Control-Allow-Origin", "*") ![](https://img.kancloud.cn/93/97/93972b15e8536d5636f504acffe805b5_829x352.png) 有了这个, CORS就可以让浏览器Ajax访问像同源一样的资源了, 但是需要后台支持哦 后台设置响应头字段: 关于CORS支持的: * Access-Control-Allow-Origin 设置允许请求的浏览器端域名, *代表所有 * Access-Control-Allow-Credentials 为true 的时候, 服务器允许浏览器发送Cookie到后台, 删除此字段, 不允许携带Cookie > 切记, 前端要设置ajaxObj.withCredentials = true 才可以让浏览器带上cookie > 切记2: cookie还是存在同源策略, 所以不同域名后台设置cookie不生效 * Access-Control-Allow-Headers 服务器端允许携带过来的请求头 * Access-Control-Expose-Headers 允许前端拿到的响应头 默认只能拿到以下这些, 如果不设置此字段 * `ache-Control` * `Content-Language` * `Content-Type` * `Expires` * `Last-Modified` * `Pragma` 5. 如果后台不支持, 前端可以采用代理服务器转发的方式, 来请求服务器接口 >[info] 非简单请求 --- 请求方法 * PUT * DELETE 请求头 自定义名字的 >[warning]问题 --- 会在正式发送请求前, 发送一次OPTIONS请求. 确认下后端是否允许非简单的请求 ![](https://img.kancloud.cn/35/fd/35fdefd79dd98cdadfb64f3e2ca633c0_885x372.png) 不允许则报错 ![](https://img.kancloud.cn/0f/3d/0f3dd62cb4339286beafed9e35016d5b_1272x42.png) 解决方式: 服务器端, 需要作出响应设置 * Access-Control-Allow-Methods 允许浏览器端的请求方式 例如"GET, POST, DELETE, PUT, OPTIONS" * Access-Control-Allow-Headers 允许浏览器端发送的请求头字段 第一次OPTIONS请求, 查看响应头 ![](https://img.kancloud.cn/25/4e/254efb32b52f343e268e014203ecd87c_870x473.png) 第二次, 正常发送Ajax请求, 接收结果 ![](https://img.kancloud.cn/dc/cc/dccc8a4476de52ca2c99a0daf5e7f1cd_869x464.png) >[danger] 总结 1. 浏览器同源策略, 作出的跨域限制, 但是现在浏览器支持了CORS标准, 允许跨域请求, 但是还需要后端支持CORS才可以. 2. Cookie还是存在同源策略的限制, 后端跨域设置前端cookie, 前端Ajax报错 3. JSONP只支持GET方式, 而CORS都可以支持 4. 非简单请求, 注意让后台支持. 不只是跨域的支持哦