直接在vue模板文件里这样写正常
//这样正常请求
import axios from 'axios'
axios({
method: 'post',
url: '/getExcel',
params:data,
headers: {
'Content-Type': 'application/json'
},
responseType: 'blob'
})
封装的axios请求报异常是什么鬼?
//这样报跨域问题
//api.js
import ajax from "../axios";
export const getExcel = ({time, type})=>{
return ajax.request({
url:'/getExcel',
headers: {
'Content-Type': 'application/json'
},
method:'post',
responseType: 'blob',
params:{
time,
type
}
})
}
//.vue文件
getExcel({
time:this.time,
type:this.reason?this.reason:0
}).then(res=>{
console.log(res);
})
这是怎么回事啊,这两种方式不应该是一样的吗?上面正常,下面报跨域问题,小弟有点迷茫,还请大佬不瑟吝教
跨域需要后端配合,除非使用 JSONP 这种变相方案解决(个人认为很丑)。
仔细观察,你会发现在 POST 请求前浏览器会先发送一个 OPTIONS 请求(首次跨域时),即跨域前的验证。OPTIONS 会告诉浏览器是否可以跨域等信息,若不允许即出现提问所述的错误。
后端解决方案:
如果使用 SPRING MVC 那么直接添加几个注解即可,否则请参考以下几个关键 Headers
什么是跨域?同一协议,同一域名,同一端口号,以上三点任一不符合即为跨域。