在详情页刷新无数据,axios请求2次,怎么取消option请求

来源:1-1 课程介绍(导学 )

慕勒6068616

2021-10-28

老师,我是用axios 在详情页面刷新会发送2次请求,一个为option,一次为get ,当先option的时候,返回的是为空,会导致详情页刷新无数据的情况
![![图片描述
图片描述
图片描述

axios.defaults.baseURL = 'http://apis.imooc.com/api'

axios.interceptors.request.use(config => {
  config.params = { ...config.params, icode: '3D091096B12BEB28' }
  store.commit('setLoading', true)
  store.commit('setError', { status: false, message: '' })
  return config
})
axios.interceptors.response.use(config => {
  // setTimeout(() => {
  //   store.commit('setLoading', false)
  // }, 2000)
  store.commit('setLoading', false)
  return config
}, e => {
  const { error } = e.response.data
  console.log(e.response)
  store.commit('setError', { status: true, message: error })
  store.commit('setLoading', false)
  return Promise.reject(error)
})
写回答

1回答

张轩

2021-10-29

同学你好 这个问题是 xhr 发送跨域请求的经典问题 在发送跨域请求的时候 

浏览器必须首先使用 OPTIONS 方法发起一个预检请求(preflight request),从而获知服务端是否允许该跨源请求。服务器确认允许之后,才发起实际的 HTTP 请求。在预检请求的返回中,服务器端也可以通知客户端,是否需要携带身份凭证(包括 Cookies 和 HTTP 认证相关数据)。

这个有可能是一道面试题,请同学记住欧。可以研究一下具体的文档:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS#%E5%8A%9F%E8%83%BD%E6%A6%82%E8%BF%B0

我认为这个不需特殊处理,因为 options 那次请求几乎不会有什么影响,GET 紧接这就会发生。

0
0

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目,率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程