同源策略

同源策略是浏览器提供的一个安全功能，相当于添加了一个墙,它限制了一个前端发送ajax请求的目标地址和浏览器当前页面访问的地址交互，同源分为 协议(如：http/https) 、 域名(ip地址) 、端口号三者组件的。只要三者有一个不同就会受到同源策略的限制，会造成跨越问题。

跨域错误

利用koa和koa-router创建了一个简单的接口

在前端发送请求

受到了同源策略的影响，协议相同，域名相同，但是端口号不同，所以造成了跨域问题

解决跨越
1.jsonp
jsop就是利用了html中script标签中的src属性发送请求，因为它不受同源策略的影响，还有，img、link、iframe..

• img默认响应回来内容会被当做图片处理
• link默认响应回来的内容会被当做css处理
• iframe默认响应回来的内容会被当做html页面处理
• script默认响应回来的内容会被当做js代码处理
  所有在这里使用 script最为合适。
  小案例：
  在html中使用script标签请求目标地址
  
  可以在浏览器网络中查看
  
  同时也得到了响应的数据
  
  但是会有报错 表示在代码中引用了一个未定义的变量或函数。
  
  解决方法：
  引入在script请求中不能直接响应会问题，必须是一个回调。
  通过callback参数，后端接收callback，后端经过数据处理，返回callback函数调用的形式，callback中的参数就是json
  
  
  打印结果就是函数传递的参数
  比如京东、百度、、、都还在使用(联想词的搜索)

2.cors
后端允许跨越 添加响应头
服务器通过设置特定的HTTP头部来允许跨源请求。 * 表示所有
'Acess-Control-Allow-Origin': '白名单地址 / *'
也可以使用插件 @koa/cors

const app = new(require("koa"))()
const router = require("./router/index")
// 引入cors包
const cors = require("@koa/cors")


// 解决跨越
app.use(cors({
    origin: true
}))

// 调用
app.use(router)

app.listen(3000, () => {
    console.log('服务器启动成功 http://localhost:3000')
})

3. vue前端解决 通过代理解决
   官网：https://vitejs.dev/config/server-options.html#server-proxy
   在vite-config.ts中

     server: {
        // port: 8000, // 设置服务启动端口号
        // open: true, // 设置服务启动时是否自动打开浏览器
        cors: true, // 允许跨域
   
        // 设置代理，根据我们项目实际情况配置
        proxy: {
            '/api': {
                //api是自行设置的请求前缀，按照这个来匹配请求，有这个字段的请求，就会进到代理来
                target: 'http://localhost:3002/v1.0/api/',
                changeOrigin: true, //是否跨域
                rewrite: (path) => path.replace('/api', '') //重写匹配的字段，如果不需要放在请求路径上，可以重写为""
            }
        }
    },