跨域是什么

跨域是因为浏览器的同源策略所导致的，同源策略是一种约定，他是一个重要的安全策略，同时它是由协议、域名、端口、请求资源地址等部分组成。

什么情况会产生跨域

1.不同协议 2.不同域名 3.不同端口号 4.不同ip地址

跨域的解决方案(三种主流)

1.jsonp跨域，原理:动态创建script标签请求后端接口地址，传递callback参数，后端接收callback，后端经过数据处理，返回call函数调用的形式，callback中的参数就是json

2.vue配置代理,原理:就是在vue里面使用那个vue.config.js里面配置一个proxy，里面有个target属性指向跨域链接.

3.CORS跨域,CORS是跨域资源共享,原理:它允许浏览器向跨域服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制.

话不多说，直接上代码:

首先打开vue.config.js文件里devServe里面配置proxy

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '/api': {
        target: 'http://47.93.101.203',// 后端接口地址 别忘了加上http
        ws: true,
        changeOrigin: true, //是否允许跨域
        pathRewrite: {
          '^/api': '' // 重写路由, 把想替换掉的路由地址替换为空或者别的
        }
      },
    }
  }
})

我们可以利用baseUrl直接默认值是api，每次访问的时候，他会自动补上，不需要我们自己在每个接口写这个前缀了。

import axios from "axios";
const http = axios.create({
    baseURL: '/api',
    timeout: 10000,
});

经过上面的配置，我们可以轻松的访问，无需担心跨域的问题

import axios from "@/utils/http.js";
export default {
  mounted() {
    axios.get("/adminapi/menusList").then((res) => {
      console.log(res);
    });
  },
};

小结：
代理跨域的主要方式是利用服务器请求服务器的方式避过跨域问题来实现的.大概的流程: 浏览器===>代理服务器===>目标服务器.

若有不对的地方，请不吝指出，同时也欢迎留言咨询，谢谢~