【融职培训】Web前端学习 第6章 jQuery Ajax 4 跨域请求

一、同源策略

同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以xyz.com下的js脚本采用ajax读取abc.com里面的文件数据是会被拒绝的。

相同ip（域名），同端口，则为同源，否则为不同源

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制

二、jsonp原理

Ajax在默认的情况下是不可以跨域的，但是script标签可以通过src属性获取到跨域的js文件。

因此我们可以想到一个办法，那就是把数据装载到js文件中，然后通过script标签跨域引入到当前项目中，进而使用跨域的数据。

这里需要注意的是，jsonp本质上并不是Ajax，但是功能很像，所以经常会把jsonp方法和Ajax放在一起讨论

我们现在模拟一个jsonp的示例：

1. 在本地开启两个服务器，端口分别为8080和3000。
2. 把待获取的数据放在3000端口服务器的一个js文件中。
3. 3000端口服务器的前端页面引入8080端口服务器的js文件。
4. 然后使用3000端口服务器的数据。

使用jQuery跨域请求数据

 1 //核心代码如下所示
 2 const jsonp = require('koa-jsonp')
 3 app.use(jsonp())
 4 router.get("/data", ctx => {
 5     ctx.body = "hello jsonp"
 6 })
 7 
 8 $.ajax({
 9     url:"http://127.0.0.1:3000/data",
10     dataType:"jsonp"
11 }).done( res => {
12     console.log(res);
13 })

三、设置响应头

很多时候我们在制作一个前后端分离的项目时，开发过程是需要跨域的，但是项目部署后并不需要跨域，这个时候，我们可以直接设置服务器允许跨域。

通过设置http协议的响应头部属性Access-Control-Allow-Origin可以允许其他服务器对本服务进行跨域请求，示例代码如下所示：

1 router.get("/getdata", async (ctx) => {
2     ctx.set('Access-Control-Allow-Origin', 'http://127.0.0.1:8080'); 
3     ctx.body = "data"
4 });

设置之后，/getdata这个接口就会允许跨域请求了。

四、课后练习

默认数据如下所示，

["香蕉","苹果","鸭梨"]

使用http-server创建一个服务器，端口为8080；

使用Koa创建一个服务器，端口为3000；

在8080端口的服务器使用axios的跨域请求实现后台数据列表的增删改查，要求如下：

1. get方法获取数据列表
2. post添加数据，然后重新查询
3. put修改数据，然后重新查询
4. delete删除数据，然后重新查询