CORS解决跨域

            console.log(xhr.responseText);

        };

        xhr.send();

    };



    document.querySelector(".btn2").onclick = function(){

        let xhr = new XMLHttpRequest();

        

        xhr.open("post","http://localhost:4000/post",true);// 路径不能写成相对路径

		xhr.onload = function(){

            console.log(xhr.responseText);

        };

        xhr.send();

    }

</script>

两个服务器文件

const Koa = require(“koa”);

const static = require(“koa-static”);

const Router = require(“koa-router”);

let app = new Koa();

let router = new Router();

app.use(static(__dirname+“/static”));

router.get(“/”,ctx=>{

ctx.body = "3000端口"

});

router.post(“/post”,ctx=>{

ctx.body = "3000端口--同源"

})

app.use(router.routes());

app.listen(3000)

const Koa = require(“koa”);

const static = require(“koa-static”);

const Router = require(“koa-router”);

const koaBody = require(“koa-body”)

let app = new Koa();

let router = new Router();

app.use(static(__dirname + “/static”));

app.use(koaBody());

router.get(“/index”, ctx => {

ctx.body = "4000端口"

});

router.post(“/post”,ctx=>{

ctx.body = "4000端口--非同源"

})

app.use(router.routes());

app.listen(4000)

**注意点：** 两个服务器文件都要打开



**浏览器反馈**  

![](https://img-blog.csdnimg.cn/20200413205946282.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTX0RHRA==,size_16,color_FFFFFF,t_70)  

**结论** 这种情况呢跨域是请求成功了，但是我们为什么拿不到数据？因为跨域是一种浏览器行为，服务器端没有跨域、同源这种说法，浏览器基于同源策略所以没有响应，所以除了jsonp这种方法外就是我们今天要了解的CORS



**CORS的处理也非常简单**  

我们只需要在4000端口的服务器文件里设置一下头部信息就可以了

router.post(“/post”,ctx=>{

// 允许跨域

ctx.set("Access-Control-Allow-Origin","*"); 

ctx.body = "4000端口--非同源"

})

**浏览器反馈**  

![在这里插入图片描述](https://img-blog.csdnimg.cn/202004132113101.jpg)  

**注意点！！！**



1.  不安全——如果设置成这样就相当于把浏览器的同源策略毁掉，全世界都可以找到你并获取到你的数据

2.  不能携带凭证（待会会说到凭证是什么）



**综上所述** 我们一般不这样设置，我们需要给他设置成指定的

router.post(“/post”,ctx=>{

// 1. 允许跨域

// ctx.set("Access-Control-Allow-Origin","*"); 

ctx.set("Access-Control-Allow-Origin","http://loaclhost:3000");



ctx.body = "4000端口--非同源"

});

* * *



现在我们从新回到页面来说，来获取返还头部信息

	document.querySelector(".btn2").onclick = function(){

        let xhr = new XMLHttpRequest();

        xhr.open("post","http://localhost:4000/post",true);// 路径不能写成相对路径

		xhr.onload = function(){

            console.log(xhr.responseText);

            // 获取返还头部信息

            let res = xhr.getAllResponseHeaders();

            console.log(res);

        };

        xhr.send();

    }

**浏览器反馈**  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200413213353890.jpg)  

但是头部信息还是挺多的，没有获取完整  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200413213758994.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTX0RHRA==,size_16,color_FFFFFF,t_70)  

**所以这个方法不能获取到所有的头部信息** 但是这不是方法的问题，这是服务器端在你想要获取到这些信息做功能是，服务器不让你获取到，所以我们还是在设置一下，允许获取头部信息

router.post(“/post”,ctx=>{

// 1. 允许跨域

// ctx.set("Access-Control-Allow-Origin","*"); 

ctx.set("Access-Control-Allow-Origin","http://localhost:3000");



// 2. 允许获取头部信息

ctx.set("Access-Control-Expose-Headers", "Content-Type,Content-Length,Date");



ctx.body = "4000端口--非同源"

});

**浏览器反馈**  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200413214116717.jpg)  

CORS的其他设置指令

router.post(“/post”, ctx => {

// 1. 允许跨域

ctx.set("Access-Control-Allow-Origin", "http://localhost:3000");



// 2.允许获取的头部信息(响应)

ctx.set("Access-Control-Expose-Headers", "Content-Type,Content-Length,Date");



// 3.设置允许前端发送的请求方式

ctx.set("Access-Control-Allow-Methods","GET,DELETE,HEAD,OPTIONS");



// 4.允许前端设置的头部(请求)

ctx.set("Access-Control-Allow-Headers","Content-Type,Content-Length,text");



ctx.body = "4000端口--非同源";

});

**允许携带凭证** 后端的服务器需要设置一下，前端的页面也需要开启一下

xhr.withCredentials = true; //写在前端页面

ctx.set(“Access-Control-Allow-Credentials”,true); //写在后端页面

[]( )预检请求

==============================================================



**开启默认**

	document.querySelector(".btn2").onclick = function(){

        /*

            跨域：请求成功了

            跨域是浏览器行为，服务器端没有跨域、同源这种说法

        */ 

        let xhr = new XMLHttpRequest();

        xhr.open("post","http://localhost:4000/post",true);// 路径不能写成相对路径



        // 设置请求头部

        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

        

        // 允许跨域请求携带凭证

        xhr.withCredentials = true;



		xhr.onload = function(){

            console.log(xhr.responseText);

            // 获取返还头部信息

            let res = xhr.getAllResponseHeaders();

            console.log(res);

        };

        xhr.send();

    }

**浏览器反馈**  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200413221339983.jpg)  

**修改请求头**


#  最后

**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

![img](https://img-blog.csdnimg.cn/img_convert/9a4d1a4e389f05f0355e4fdfc24a3d4b.jpeg)

![](https://img-blog.csdnimg.cn/img_convert/649351e6abef96e9f6eb8f8267e46de7.png)

![](https://img-blog.csdnimg.cn/img_convert/6360473f972d4f13aef13e8d824cd8c2.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**
从何学起的朋友，同时减轻大家的负担。**

[外链图片转存中...(img-YDL2GjGe-1714838616072)]

[外链图片转存中...(img-1zNexpf9-1714838616072)]

[外链图片转存中...(img-3iyp7PJG-1714838616072)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**