之前按照网上的教程走了一遍发现没有实现,于是在经历了一天的闷棍后,终于找到了实现方法。果然解决方法比较懵逼。以后还需努力学习。
现在发一遍网络上同用的教程。
1.首先引入包

npm install axios -s

2.在主文件夹下创建vue.config.js文件,输入以下代码

module.exports={
    //打开vue官网 vue cli查看vue.config.js配置。
    //vue脚手架全部打包好了,你想要啥东西都可以在这里配置,不能直接里面配置
    lintOnSave:false,//关闭语法检查

    //跨域的两种写法
    //第一种是这样的,只能跨一个域,
    //而且同源下若是有一个同名文件,就先跨域到本文件下的文件那里去
    // devServer:{
    //     proxy:'http://119.23.110.93:8080'
    // }

    //第二种方法,可以跨很多域
    devServer:{
        proxy:{
            '/api':{
                target:'http://127.0.0.1:8000',//你要跨域的服务器
                changeOrigin: true, // 允许跨域
                pathRewrite:{'^/api':''},//位置替换,把请求的/api换为空
                //正则表达式,/api变为空字符串
                //由于前面写http://localhost:8081/api/hello
                //传到服务器是/api/hello,不是/hello
                //所以现在将/many去掉
                
            },
            'aaa':{
                target:'http://Other'
            }
        }
    }
}

3.然后在引入文件

import axios from 'axios';
Vue.prototype.$axios = axios;

4.然后重启服务器,发送请求,不出意料是失败了

GetNum2(){
     axios.get('/api/hello').then(
       response =>{
         console.log('请求成功'+JSON.stringify(response.data))
       },
       error =>{
         console.log('请求失败了'+error.message)
       }
     )
   },

第二种方法(我成功的方法)

1.去到config文件夹,找到index.js,在dev部分添加

dev: {
	proxyTable: {
      '/api': { //代理标识
        target: 'http://127.0.0.1:8000',//指向的实际地址
        changeOrigin: true, // 允许跨域
        pathRewrite: {'^/api': ''  },
      }
    },
}

2.重启服务器,然后查看效果,成功了
此时发送的请求接口如下,是vue的服务端口请求的,不是8000后端接口发送的。
在这里插入图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐