跨域请求
同源策略
ajax不能在不同源的情况下获取数据
jsonp原理
启动服务
使用jQuery的jsonp
3000项目的server.js
const Koa = require("koa");
const router = require("koa-router")();
const jsonp = require("koa-jsonp");
const static = require("koa-static");
const app = new Koa();
app.use(static(__dirname + "/public"));
app.use(jsonp());
router.get("/data", ctx =>{
ctx.body = "hello world";
})
app.use(router.routes());
app.listen("3000",() => {
console.log("server is running");
});
8080项目的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>server on 8080</h1>
<script src="js/jquery-3.6.1.min.js"></script>
<script>
$.ajax({//jsonp并不是ajax，只是jQuery把它封装在了ajax方法里
url:"http://127.0.0.1:3000/data",
dataType:"jsonp"//前端发送类型为jsonp的请求
}).done(res => {
console.log(res);
})
</script>
</body>
</html>
jsonp是一个get请求，没办法跨域处理post、put请求
设置响应头
用axios发送请求
后台不设置jsonp
显然会报错，响应头信息的Access-Control-Allow-Origin属性没有设置
如果设置这个属性就可以让服务器允许跨域请求，如果写*就是允许任何地址对服务器跨域请求
重启后实现跨域请求
虽然很简单，但是有安全隐患。如果设置成允许某个网站跨域请求服务器，如果那个网站被攻击了，那自身的服务器也会受到影响
一般项目阶段分为开发和部署，开发有时候是前后端分离的，交互的时候用大量的跨域请求来交互，但是部署的时候，真正放在服务器上时是不跨域的
所以一般是在开发阶段设置响应头，允许跨域请求，因为内部的工作流程不会有太多安全隐患，直到系统上线，就去掉响应头，不准跨域请求
