vue3跨域配置

先看图：

图1：是直接获取数据，但是获取失败，这是典型的跨域。

图2  图3 是通过跨域配置后通过相同的接口拿到的数据。

1

2

3

接下来看看相关配置：

首先就是 在 src 下 创建一个 vue.config.js 文件，然后在文件里配置 参数：

module.exports = {

  devServer: {

    Proxy: {

      '/api': {

        target: 'http://www.xiongmaoyouxuan.com',

        ws: true,

        changeOrigin: true

      }

    }

  }

}

 

如下图：

然后在 工具文件里去 封装 axios：

（这里我省略了线上环境和开发环境域名的判断，请求拦截，响应拦截，参数序列，优化等等，主要是测试配置跨域。）

import axios from 'axios'

const $http = axios.create({

  baseURL: 'http://www.xiongmaoyouxuan.com/api', // 所有的请求地址前缀部分

})

const $get = function(url,param,fn){

  $http.get(url,{params:param}).then(function(res){

    fn(res.data)

  }).catch(function(err){

    console.log(err)

  })

}

export default{$get}

 

如下图：

最后一步使用：

<script>

  import {onMounted} from 'vue'

  import api from '../../../utils/util'

  export default {

    setup() {

      onMounted(() => {

        api.$get(

          "/tabs?sa=",

            {},

            res => {

                console.log('测试', res)

            }

        )

      })

      return {}

    },

  }

</script>

 

如下图：

稳的一批，整起来