“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第3篇文章，点击查看活动详情”
为什么会产生跨域？
这是浏览器的同源策略，当一个前端项目向后端项目发请求，或者说这两个项目要进行通信的话，那么这两个项目的这三个地址都要相同即：协议号 和 域名 和 端口号 都相同，这样才符合浏览器的同源策略。
协议号 和 域名 和 端口号
https://( 协议号) www.juejin.cn (域名) :8080 (端口号) /userInfo( 路径),如果协议号、域名和端口这三个有一个不相同就不符合跨域策略。
跨域通常发生在什么时候？
跨域通常发生在后端响应回来的数据，在浏览器接收到时被跨域机制拦截下来
前面我们讲了利用script的src属性加载资源时不受同源资源策略的影响这一特性，解决前后端跨域的问题；现在我们来讲讲解决跨域的第二种方法---cors (Corss-Origin Resource Sharing) 这是由后端干的，因为产生跨域问题的时候，都是后端响应回来的数据，在浏览器接收到时被跨域机制拦截下来。所以此时后端就需要对这个响应做一些配置操作，就是这个响应被浏览器接收之后，这个响应里面携带的信息被浏览器读取，原理其实就是在请求头里面做一个配置信息，告诉浏览器不能拦截这个响应。
前端：朝localhost：3000发送一个请求
<!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">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<title>Document</title>
</head>
<body>
<button id="btn">获取数据</button>
<script>
let btn = document.getElementById('btn')
btn.addEventListener('click', () => {
$.ajax({
url: 'http://localhost:3000',
data: {
name: 'bruce'
},
method: 'get',
success(res) {
console.log(res);
}
})
})
</script>
</body>
</html>
后端：用@koa/cors这个依赖。在koa里面，要想使用cors来告诉浏览器允许别人向我发送数据就要装一个依赖 @koa/cors
const Koa= require('koa')
const app=new Koa()
const cors = require('@koa/cors');
app.use(cors()); // 后端开启cors,允许跨域操作 现在任何一个前端向这个端口发数据，都能成功
const main=(ctx,next)=>{
console.log(ctx.query.name);
ctx.body='hello world'
}
app.use(main)
app.listen(3000,()=>{
console.log('cors项目已启动');
})
这样就能解决跨域问题
那么现在我们就来看看这个依赖到底是怎么实现的
// 启动一个web请求
const http =require('http') // http.createServer 就是启动创建一个后端服务
const server= http.createServer((req,res)=>{
// 所以在这里后端要告诉浏览器，不能开启跨域，就是在响应头里面加
res.writeHead(200,{ // 成功就返回 200 的状态码
"Access-Control-Allow-Origin":"*", // 允许所有的源向我发请求 就是配置一个白名单
"Access-Control-Allow-Methods":"GET,POST,PUT,OPTIONS",// 请求的发生
// 不管向浏览器返回什么类型都可以，浏览器都不会拦截你
"Access-Control-Allow-Headers":"Content-Type", // 加了这行就是允许的请求头设置类型
})// 就是后端专门提供的一个写响应头的东西
// 在向前端响应数据前，我们就要开启cors
res.end('hello cors')
})
server.listen(3000,()=>{
console.log('cors项目已启动');
})
