Vue项目解决跨域问题

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

实操准备

        后台使用请求的地址为vue开源的端口地址：https://www.vue-js.com/api/v1/topics

        基本的数据请求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: '/api/v1/topics', // 将请求地址修改为目标地址
}).then((response) => {
  data = response.data;
  console.log(data);
});
}
})
</script>
 
 
<style lang="less">
#box{
  width: 700px;
  height: 700px;
  border: 1px solid red;
  margin: 0 auto;
  }
#get{
  height: 50px;
  width: 70px;
 
}
</style>

跨域问题实操

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

        这种情况一般是因为前端代码请求的地址与当前站点不在同一个域名下，或者被请求的接口没有配置允许跨域请求。

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

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://www.vue-js.com', // 将该行修改为目标地址
        changeOrigin: true,
      },
    },
  },
};

        控制台查看请求跨域成功：

请求数据练习

http请求方式：POST  

请求地址：

http://192.168.23.71:8999/dataVisualization/selectOrderInfo

请求参数：

字段	说明	类型	是否必填
startTime	开始时间	String	是
endTime	结束时间	String	是

请求格式：json示例如下

{

    "startTime":"2020-01-01 00:00:00",

    "endTime":"2020-12-30 00:00:00"

}

返回参数说明：

id : 主键

finalTotalAmount ：总金额

outTradeNo ：订单交易编号（第三方支付用)

provinceName ：省名称

regionName ：地区名称

userName : 用户名 

代码主体：

<template>
  <div>页面</div>
</template>

<script setup>
import axios from 'axios';
import { onMounted } from 'vue';

async function getDate() {
  let data1 = await axios.post('/api/dataVisualization/selectOrderInfo',
    {
      startTime: '2020-01-01 00:00:00',
      endTime: '2020-12-30 00:00:00'
    });

  console.log(data1)
}

onMounted(() => {
  getDate();
});
</script>


<style></style>

vue.config.js反向代理解决跨域：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://192.168.23.71:8999', //这里后台的地址模拟的;应该填写你们真实的后台接口
        ws: false,
        changOrigin: true, //允许跨域
        pathRewrite: {
          '^/api': '' //请求的时候使用这个api就可以
        }
      }
    }
  },
};

擦看控制台输出的成功请求后的数据