一.为什么会出现跨域问题?

出于浏览器的同源策略限制.同源策略是一种约定,它是浏览器最核心也是最基本的安全功能,如果缺少了同源策略,则浏览器的正常的功能可能会受到影响,跨域收是Web是构建在同源策略基础上的,浏览器只是针对同源策略的一种实现,同源策略会阻止一个域的JavaScript脚本和另一个域的内容进行交互,所谓同源(即指同一个域)就是两个页面具备

同样的协议(protocol),

主机(host)

端口号(port)

二.例子

三.解决办法

 其实在vue.config.js中可以配置（如果没有该文件可以自行创建）

该接口是github上的一个开放接口 由于我们是本地起的服务  域名不相同   所以满足了跨域行成的要求

在vue.config.js配置

module.exports = {
    devServer: {
        // port: 1664,   //自定义本地服务端口号
        proxy: {
            '/api': {                        //api表示拦截一/api开头的请求路径
                target: 'https://www.vue-js.com/api', //跨域的域名（不需要写路径）
                // ws: false,   //是否代理webSocked
                changeOrigin: true,    //是否开启跨域
                pathRewrite: {          //重写路径
                    '^/api': ''    //把/api变为空字符串
                }
            },
        }
    },
}

调用接口

test(){
      console.log('测试')
      axios.get('api/v1/topics').then(res=>{
        console.log(res)
      })
    }