04-跨域请求

同源策略

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

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

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

jsonp原理

        Ajax在默认的情况下是不可以跨域的，但是<script>标签可以通过src属性获取到跨域的js文件。因此我们可以想到一个办法，那就是把数据装载到js文件中，然后通过<script>标签跨域引入到当前项目中，进而使用跨域的数据。这里需要注意的是，jsonp本质上并不是Ajax，但是功能很像。

        

    <script src="http://127.0.0.1:3000/js/json.js"></script>
    <script>
        console.log(data3000)
    </script>

使用jQuery跨域请求数据

``` js
//核心代码如下所示
const jsonp = require('koa-jsonp')
app.use(jsonp())
router.get("/data", ctx => {
    ctx.body = "hello jsonp"
})
```

``` js
$.ajax({
    url:"http://127.0.0.1:3000/data",
    dataType:"jsonp"
}).done( res => {
    console.log(res);
})
```

设置响应头

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

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

        此方法有安全隐患，适用于开发过程是需要跨域的，但是项目部署后并不需要跨域，这个时候，我们可以直接设置服务器允许跨域。