vue axios请求跨域,网上资料一堆,有的用qs,还要在config文件夹下的index.js中修改proxyTable。如果后端配合的话,前端只需要做一些小修改,就能轻松实现跨域。

携带cookie 在axios创建时要加入withCredentials: true,默认withCredentials:false,是不会携带cookie的

axios.create({
  baseURL: '//ott-mng.jd.com/', // api 的 base_url
  timeout: 5000, // request timeout
  withCredentials: true
})

跨域需要携带两个参数config.data = JSON.stringify(config.data); config.headers = {Content-Type’:‘application/json’ }。

在这里插入图片描述

axios.interceptors.request.use(
  config => {
    // Do something before request is sent
    if (store.getters.token) {
      // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
      config.headers['X-Token'] = getToken()
    }
    config.data = JSON.stringify(config.data)
    config.headers = {
      'Content-Type': 'application/json'
    }
    return config
  },
  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)
	

需要后端配合,到这一步已经能解决跨域问题了。但是你会发现参数都是query请求,直接拼接在url后面。后端在body中拿不到数据,axios的post请求参数要写在data中,不是params

post请求需要加上method,不写的话默认get请求

request({
    url: 'url1',
    data: { a: 11, b: 2, c: 3 },
    method: 'post'
  })

get请求

request({
    url: '/admin/user/selectById',
    params: { id: 1 }
  })

如有问题请联系我~

欢迎加入QQ群:
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐