axios跨域问题

新手上路,请多包涵

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

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

阅读 3.8k
2 个回答

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题