项目编码篇之axios请求数据和前后端分别实现api跨域请求

我们在前后端分离环境下工作时需要通过接口实现前后端交互，而我们的端口地址并不是固定的，这时候就需要在前端设置请求代理或者后端允许跨域。该文章基于Vue-Cli5.x+vue3+axios+.NET6.WebApi

1、axios的使用

• 介绍：Axios，是一个基于promise网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequests。
• 安装：npm install axios --save
• 使用：src目录下新建http文件夹，文件夹再新建index.ts文件（因为使用了typescript，所以这里的后缀都是ts），在index.ts中写一个请求方法。

• //定义变量接收接口地址
  const http=ref("http://localhost:5119/api")
  //写一个通过api获取图片的方法
  export const getFlowers=()=>{
      return axios.get(http.value+"/ImageGetFlowers")
  }

  说一说我在这里遇见的坑，现象：检查浏览器后台请求成功，但是没有数据返回。思考：查看api地址发现后台api的url地址格式为api/[Controller][Action]即控制器名与方法名是没有左斜杠分隔的，而我的方法请求是有左斜杠分隔。解决：把前后端url格式调整一致即可。

• 在页面中调用写好的方法

• <script setup>
  import { getFlowers } from '../http/index'
  import { ref, onMounted } from 'vue'
  const list = ref();
  onMounted(async () => {
      let parms = {
          Id: 0,//做分页处理传入的参数
          Type: 1
      }
      list.value = (await getFlowers(parms)).data
      console.log(list.value)
  })
  </script>

  现象：写好之后我们会发现页面拿不到数据，并出现以下报错

   这就是跨域错误，提示不能通过一个端口访问另一个端口，原因：浏览器对于javascript的同源策略的限制，例如a.cn下面的js不能调用b.cn中的js,对象或数据（因为a.cn和b.cn不是同域）所以跨域就出现了，除此之外，两个页面之间 ，协议、端口号、域名/ip任意一个不不相同即为跨域。解决方案如下。

2、跨域请求

• 后端允许策略

• //在Program主函数里添加跨域策略
  builder.Services.AddCors(option=>
  {
      option.AddPolicy("CorsPolicy",opt=>opt.AllowAnyOrigin().AllowA    nyHeader().AllowAnyMethod().WithExposedHeaders("X-Pagination"));
  });
  //再使用跨域策略
  app.UseCors("CorsPolicy");

   

• 前端设置代理

• //Vue.config.js中代码
  devServer:{
      proxy:{
        '/api':{
          target:'http://localhost:5119/api',
          //允许跨域
          ChangeOrigin:true,
          ws:true,
          pathReWrite:{
            '^/api':''
          }
        }
      }
    }
  //http/index中方法代码
  //定义变量接收接口地址
  const http=ref("/api")
  //封装一个通过api获取图片的方法
  export const getFlowers=()=>{
      return axios.get(http.value+"/ImagegetFlowers")
  }
  //http://localhost:5119/api/ImageGetImages将该接口拆解为端口+路由

  如果发现代理没生效，需要重启一下vue项目，否则再检查一下路由是否正确。学习从来无止境，循序渐进登高峰。