发生地点：浏览器端
原因：浏览器的同源策略（安全策略）
限制对象：网页内发起的异步请求（ajax,fetch,axios）
统一资源定位符的构成：协议+ip+端口+资源路径（是否同源由协议+Ip+端口决定），这三个有任何一个不一样，就会造成跨域问题。
1、代理各脚手架都有提供配置方式，package.json里也可以，而且nginx配置
2、cores解决跨域，在响应头中设置对应字段"Access-Control-Allow-Origin":"*"。
3、jsonp
（1）浏览器端的js代码动态生成一个scirpt标签，加载完文本就立即执行
（2）后端做的配合是返回一个js文本，响应类型改为text/plain
（3）前后端对变量名或函数名要做一个约定
服务端
const Koa = require('koa')
const router = require('koa-router')(); //注意：引入的方式
const app = new Koa()
const path = require('path')
router.get('/getdata',(ctx,next)=>{
//ctx.set('Access-Control-Allow-Origin', '*')
console.log('有人请求这个接口')
let { callback } = ctx.query;
ctx.type = 'text/plain'
let arr = [1,2,3,4,5,6]
ctx.body = `console.log("3333333${callback}");${callback}(${JSON.stringify(arr)})`
})
app.use(router.routes()); //作用：启动路由
app.use(router.allowedMethods());
// 静态资源
app.use(require('koa-static')(path.join(__dirname) + '/static'))
app.use(async (ctx) => {
ctx.body = 'static file server'
})
app.listen(3033, () => {
console.log('build success')
})
页面端
<!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>
<div id="div">
10922班优秀高薪 666
</div>
<script>
function returndata(data){
console.log(data,'前端打印666666666666')
return data
}
if(window.location.href.indexOf("3033")>0){
console.log(window.location.href)
console.log('服务端响应的页面')
fetch('http://localhost:3033/getdata')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
}else{
console.log('野页面')
// fetch('http://localhost:3033/getdata')
// .then(function(response) {
// return response.json();
// })
// .then(function(myJson) {
// console.log(myJson);
// });
var script = document.createElement('script');
script.setAttribute('id','99999')
script.setAttribute('src','http://localhost:3033/getdata?callback=returndata');
document.body.appendChild(script)
setTimeout(()=>{//callback
//console.log(data,'-----')
},1000)
}
</script>
</body>
</html>
网友评论