Vue中axios跨域问题

Vue中axios跨域问题

1 axios跨域问题

今天遇到一个问题，在node里的Vue项目中使用axios时向tomcat下的javaweb项目发送请求，出现报错。’‘CROS policy 类似的错误’‘

在网上查了资料后发现大部分都是在webstorm ide下的解决方式。而我的是webpack初始化的结构模式，没有config文件夹，不能解决问题。发现在webpack.config.js中找到了相同的内容。在该文件下搜索proxy字段即可找到对应内容并修改。

具体的字段是这样的

proxy: {
      '/api/': {
        target: 'http://www.baidu.com/',    //修改你所要跨域的地址前缀
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''						//在Vue页面中axios内使用'/api/'代替前缀即可
        }
      }
    },

2 axios传参以及获取响应数据的问题

在axios内传参时，用字符串拼接的方式动态添加参数，常常会获取不到页面，甚至产生503错误。

后来解决了这个报错，其中是axios在使用url时动态拼接造成的，

后来在axios内的params类型中填写自己要添加的参数即可。

如：

function sent(tree){
axios({
				method: 'get',
				url: '/test.jsp',
				params: {
					 id :  NumberOne,     //在此处定义并传递参数,此例会转为"/api/test.jsp?id=NumberOne"的地址
				},
				responseType:'json'
				}).then((res) => {
					console.log(res.data);
					this.tempData = res.data;
				}).catch((err) => {
					console.log(err)
				});
}

3 axios的同一函数内的对象无法传值问题

在axios中无法向外部传值，即在

var m;

...

	axios.then((res)==>{

	m = res.data;

})

...
console.log(m);
return m;

会发生报错

报错m为undefined

解决方法：

在vue定义范围内新定义一个data ，在return中定义该变量即可。

如：

data() {
			return {
				html:'',
				tableData1: [],
				tempData: '',			//获取axios接收的数据，在需要使用的地方，
				input1:'',
				input2:'',
				input3:'',
				input4:'',
			}
		}

小结

ajax、axios 归根到底是互联网通信协议中的一种，并且核心仍然是hhtp协议。只是添加了一些额外的功能。因此在服务端中，用正常的协议（http协议）来对接即可。ps(要说明一下，jsp其实相当于一个另类的servlet，如果你需要重写jsp页面美化为html页面，而且系统不支持spring boot的模式，或者后台代码太多不想修改，建议你可以用axios或者ajax来请求该jsp页面，只需要在jsp中修改返回的数据即可。相信用这个方法的人跟我一样被老板强迫后端做前端的， o(一︿一+)o ）