4.跨域解决方案

1、跨域问题

js采用的是同源策略，也就是当协议、域名、端口任意一个不相同时，都会产生跨域的问题

2、解决方案

1. 后台解决

cors，这里不展开描述

1. 前台解决

proxy

3、测试代码

MyCustomComponent.vue中：

<template>
    <div></div>
</template>
<script>
export default {
    name: "MyCustomComponent",
    mounted() {
        // 用全局的$axios进行快捷get请求
        this.$axios.get("http://iwenwiki.com/api/FingerUnion/list.php").then(res => {
            console.log("--------快捷get请求--------");
            console.log(res.data);
        }, error => {
            console.log("--------快捷get请求error--------");
            console.log(error);
        })
    }
}
</script>
<style scoped>
</style>

在vue.config.js文件下添加devServer的设置即可，如下代码：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '/api': {
        target: 'http://iwenwiki.com/',
        changeOrigin: true
      }
    }
  }
})

MyCustomComponent.vue中此时不需要再用全路径：

<template>
    <div></div>
</template>
<script>
export default {
    name: "MyCustomComponent",
    mounted() {
        // 用全局的$axios进行快捷get请求
        this.$axios.get("/api/FingerUnion/list.php").then(res => {
            console.log("--------快捷get请求--------");
            console.log(res.data);
        }, error => {
            console.log("--------快捷get请求error--------");
            console.log(error);
        })
    }
}
</script>
<style scoped>
</style>

此时能正确访问到数据了：