跨域请求

跨域请求

1.同源策略

同IP同端口即为同源，为了安全，不同源的客户端在未授权情况下不可读写对方资源，但部分场景需要读写对方资源——跨域请求

2.利用jsonp实现跨域请求

原理

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

将数据放在js文件中，在通过script标签跨域引入即可实现跨域请求

（jsonp与ajax相似本质上不同）

用法

jQuery中的ajax封装了jsonp（二者不同）

后端核心代码

127.0.0.1:3000端口

const jsonp = require("koa-jsonp");//需要安装koa-jsonp模块
app.use(jsonp());
router.get("/getJson",ctx => {
	ctx.body = "this is the content from 3000";
})

前端核心代码

在127.0.0.1:8080端口

//请求3000端口的数据
$.ajax({
    url:"http://127.0.0.1:3000/getJson",
    dataType:"jsonp"
}).done( res => {
    console.log(res);
})

3.设置响应头

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

127.0.0.1:3000端口允许8080端口跨域请求，’*'意味允许全部

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