同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。所以xyz.com下的js脚本采用ajax读取abc.com里面的文件数据是会被拒绝的。
相同ip(域名),同端口,则为同源,否则为不同源
同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制
Ajax在默认的情况下是不可以跨域的,但是script
标签可以通过src属性获取到跨域的js文件。
因此我们可以想到一个办法,那就是把数据装载到js文件中,然后通过script
标签跨域引入到当前项目中,进而使用跨域的数据。
这里需要注意的是,jsonp本质上并不是Ajax,但是功能很像,所以经常会把jsonp方法和Ajax放在一起讨论
我们现在模拟一个jsonp的示例:
使用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的跨域请求实现后台数据列表的增删改查,要求如下: