什么是跨域？ —— 非同源策略请求

什么是源？

源：协议＋域名＋端口

同源：

http://127.0.0.1:4000  --->  http://127.0.0.1:4000

不同源：

协议不同

http://127.0.0.1:4000  --->  https://127.0.0.1:4000

域名不同

http://127.0.0.1:4000  --->  http://127.0.0.2:4000

端口不同

http://127.0.0.1:4000  --->  http://127.0.0.1:4001

浏览器的安全机制 ====> 不允许非同源策略请求

---

解决跨域

3种常见解决方法

1.jsonp

<script src="https://code.jquery.com/jquery-3.6.3.js"></script>

script/img/link src 无跨域限制 实现：

$.ajax({
    url:"http://127.0.0.1:8081",
    methed:"get",
    dataType:"jsonp", //执行jsonp请求
    success:(res) => {
        console.log(res)
    }
})

let express = require("express") //引入express模块，第三方模块
let app = express() //创建express服务器
app.listen("8081",() => {
    //监听一个端口号，开启一个服务
    console.log("ok")
})
// 创建一个get请求的接口
app.get("/list",(req,res) =>{
    // 接收callback方法
    let {callback} = req.query
    // 定义数据
    let data = {
        code：200
        message："阿穆"
    }
    // 返回
    res.send(`${callback}(${JSON.stringify(data)})`)
})

原理： 通过script携带callback函数返回data（需要服务端配置返回callback）

2.cors（常用）

服务端配置

res.header("Access-Control-Allow-Origon","*")

" * " : 任何源

" http://localhost:8080 " : 具体源

let express = require("express") //引入express模块，第三方模块
let app = express() //创建express服务器
app.listen("8081",() => {
    //监听一个端口号，开启一个服务
    console.log("ok")
})
// 创建一个get请求的接口
app.get("/list",(req,res) =>{
    // 定义数据
    let data = {
        code：200
        message："阿穆"
    }
    //res.header("Access-Control-Allow-Origon","*")
    res.header("Access-Control-Allow-Origon","http://127.0.0.1:8080")
    // 返回
    res.send(JSON.stringify(data))

3.proxy

代理服务

使用场景：开发环境

vue.config.js

const { defineConfig } = require("@vue/cli-service")
module.exports = defineConfig({
    transpoleDependencide:true,
    devServer:{ //配置开发服务器
        "/api":{
            target:"http://127.0.0.1:8081", // 路径转发
            changeOrigin:true, //是否跨域
            pathRewrite:{ // 替换路径中的/api,一般替换为空
            "/api":""
            }
        }
    }
})