关于在vue中axios跨域问题没反应的问题

之前按照网上的教程走了一遍发现没有实现,于是在经历了一天的闷棍后,终于找到了实现方法。果然解决方法比较懵逼。以后还需努力学习。 现在发一遍网络上同用的教程。 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后端接口发送的。

经验分享 程序员 微信小程序 职场和发展