跨域（Cross-Origin）是指在浏览器中运行的 JavaScript 代码试图访问不同源的资源时所遇到的一类限制问题。不同源是指协议（http、https）、域名（example.com、google.com）、端口号（80、8080）有任何一个不同时，就认为是不同的源，这个策略称为同源策略（Same-Origin Policy）。

实操准备

        准备一个有跨域问题的后台服务（将后台解决跨域问题的代码删掉）：Vue+Echarts 项目演练（中）后台数据接口的创建_open_test01的博客-CSDN博客

        基本的数据请求vue代码：

<template>
  <div id="box">
    <button id="get">get请求</button>
  </div>
</template>
 
<script setup>
//引入
import axios from 'axios'; 
import { onMounted ,reactive } from 'vue';
 
//定义容器变量
let data = reactive({})
 
//钩子函数
onMounted(() =>{
  //获取按钮
const betn = document.getElementById("get");
//绑定事件
betn.onclick = function(){
  //发送请求
  axios({
    //请求类型
    method:"GET",
    //URL 获取http://localhost:3000/one/data的json数据
    url:"http://localhost:3000/one/data",
  }).then((p) =>{ //函数回调
    //输出
    data = p;
    console.log(data.data.chartData1.chartData)
  })
}
})
 
 
</script>
 
 
<style lang="less">
#box{
  width: 700px;
  height: 700px;
  border: 1px solid red;
  margin: 0 auto;
  }
#get{
  height: 50px;
  width: 70px;
 
}
</style>

        后台数据服务端口地址：http://localhost:3000

跨域问题实操

        当出现跨域问题时,拒绝请求访问端口地址错误

 在vue.config.js设置解决跨域参数（注意改方式只适用于cli脚手架工具创建的vue项目）

module.exports = {
  devServer: {
    port: 8088, //表示开发服务器的端口号，默认为 8080，这里将其设置为 8088。
    proxy: {
      '/api': {
        target: 'http://localhost:3000/', // 目标API服务器的地址，可设置为其他域名
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          '^/api': '' // 重写目标API路径为本地的路径
        }
      }
    }
  }
}

        axios端口的使用 

axios({
    //请求类型
    method:"POST",
    //URL 获取http://localhost:3000/one/data的json数据
    url:"/api/one/data",
    data: {
      
    }
  })