vue-resource实例，跨域问题

1.vue-resource引入。

1）直接下载vue-resource.min.js并引入。

2）本地安装vue-resource，再引入。在项目目录下执行以下命令。前提是已经初始化vue项目。或者初始化node环境npm init.

npm i vue-resource --save-dev

2.引入

import VueResource from "vue-resource"

this.$http.post('http://192.168.2.187:9091/api/v1/login', 
        data,{
	headers: {},
    }).then(function(res) {
	//TODO
    } else if (resCode == 400) {
	//TODO
	}
    }, function(err) {
	alert("服务器错误，请联系系统管理员！")
	console.log("err" + err);  
    })

执行报错如下：

原因：vue-resource只是引入了，但是没有应用到Vue中。在import后加入如下代码

Vue.use(VueResource);

3.出现跨域问题。注：服务器端已经设置了允许跨域请求。ajax请求可以正常访问。错误如下：

Failed to load http://192.168.。。。。/login:
Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

错误原因是headers中的content-type不对。

解决办法：在vue-resource应用到vue中后加入如下代码：

Vue.http.options.emulateJSON = true;

至此，请求已经可以正常发送了。下面附上整体代码

import Vue from "vue"
	import VueResource from "vue-resource"
	Vue.use(VueResource);
	Vue.http.options.emulateJSON = true;
	export default {
		data() {
			return {
				username:'',
				password:''
			}
		},
		methods:{
			login : function() {
				var data = {
					username: this.username,
					password: this.pwd,
					version: '1.0'
				}
				this.$http.post('http://192.168.1.1:8080/api/v1/login', data,{
					headers: {},
				}).then(function(res) {
					var resCode = res.body.errorCode;
					if (resCode == 200) {
						//
					} else if (resCode == 400) {
						//
					}
				}, function(err) {
					alert("服务器错误，请联系系统管理员！")
					console.log("err" + err);  
				})
}

2尝试了一下axios，这个是vue推荐的方法。同样的调用方法报错如下：

Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

原因是请求headers中含有content-Type字段，但是服务器端Access-Control-Allow-Headers中并没有这个字段。于是修改服务器headers的设置。PHP代码：header("Access-Control-Allow-Headers: Authorization, Content-Type");请求可以正常发送了。

安装：命令提示行，到当前项目目录下：npm i axios --save-dev

引入和使用：

import axios from "axios"
axios.post('http://192.1......./api/v1/login',
    data
    ).then(function(res) {
        console.log(res);
    }, function(err) {
	console.log(err);
})

注：axios不是vue的插件，不需要Vue.use(axios)