关于在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后端接口发送的。