axios跨域问题

Question

直接在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); 
 })

这是怎么回事啊，这两种方式不应该是一样的吗？上面正常，下面报跨域问题，小弟有点迷茫，还请大佬不瑟吝教

Answer 1

跨域需要后端配合，除非使用 JSONP 这种变相方案解决（个人认为很丑）。
仔细观察，你会发现在 POST 请求前浏览器会先发送一个 OPTIONS 请求（首次跨域时），即跨域前的验证。OPTIONS 会告诉浏览器是否可以跨域等信息，若不允许即出现提问所述的错误。

后端解决方案：
如果使用 SPRING MVC 那么直接添加几个注解即可，否则请参考以下几个关键 Headers

Access-Control-Allow-Origin: *   // 来源域名或 * 通配
Access-Control-Max-Age: 6000     // 授权时长，即多长时间不再验证（不再发送 OPTIONS 验证）
Access-Control-Allow-Methods: *  // 允许方法（POST GET DELETE 等）或 \* 通配

什么是跨域？同一协议，同一域名，同一端口号，以上三点任一不符合即为跨域。

Answer 2

如果你是windows，chrome浏览器，按照下面的文章进行设置一般就能解决。
https://blog.csdn.net/wangxin...