最近在vue项目中用到了axios,写法很简洁,还基于promise,我们后端跨域解决方案用的是CORS(Cross-Origin Resource Sharing)跨域资源共享:
跨源资源共享标准通过新增一系列 HTTP 头,让服务器能声明那些来源可以通过浏览器访问该服务器上的各类资源(包括CSS、图片、JavaScript 脚本以及其它类资源)。另外,对那些会对服务器数据造成破坏性影响的 HTTP 请求方法(特别是 GET 以外的 HTTP 方法,或者搭配某些MIME类型的POST请求),标准强烈要求浏览器必须先以 OPTIONS 请求方式发送一个预请求(preflight request),从而获知服务器端对跨源请求所支持 HTTP 方法。在确认服务器允许该跨源请求的情况下,以实际的 HTTP 请求方法发送那个真正的请求。服务器端也可以通知客户端,是不是需要随同请求一起发送信用信息(包括 Cookies 和 HTTP 认证相关数据)。
关键在于配置Access-Control-Allow-Origin: 允许跨域访问的域,可以是一个域的列表,也可以是通配符"*"。这里要注意Origin规则只对域名有效,并不会对子目录有效。即http://foo.example/subdir/ 是无效的。但是不同子域名需要分开设置,这里的规则可以参照同源策略。
在用axios.get的时候没啥问题,但是用post的时候不好使了,显示了跨域不通过,显示了一个OPITION接口请求,出bug了,定位问题吧,把axios换成jquery的$.ajax.get好使,令我很费解,我又换了反向代理的替代原有跨域方式,竟然也好使,看来有点意思 。看了下官方文档有这么2种解决方式:
//axios post跨域问题
//方法一
// var params = new URLSearchParams();
// params.append('content', this.ruleForm.idea);
// params.append('contact', this.ruleForm.tel);
// axios.post('/common/feedback/add', params)
//方法二(需要引入Qs库)
axios.post('/common/feedback/add', qs.stringify({
content: this.ruleForm.idea,
contact: this.ruleForm.tel }))
.then((res) => {
if (res.data.message == "success") {
this.resetForm('ruleForm')
this.$message({
message: '提交成功',
type: 'success',
duration: 1000
});
}
})
.catch(function (error) {
console.log(error);
});
解决方法有了,就是把原有数据字符串化,据说是axios不支持form格式,不过还是没有点到位,具体原因还需日后深究一下。