Vue axis 代理请求不成功,跨域并报错

Question

1.vue axios跨域请求,后台已配置允许跨域,代理访问的时候还报错跨域
2.配置了代理访问地址还是localhost

---

axios.defaults.headers.common['Access-Control-Allow-Origin'] = "*";
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

---

proxyTable: {

  '/apis': {
    target: 'http://192.168.1.109/xxx/aa', 
    changeOrigin: true,
    pathRewrite: {
      '^/apis': '' 
      }
  }
}

---

this.$http.post('/apis/bbb/cccc', {

  json:JSON.stringify({})
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

3.请求结果报错

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

Error: Request failed with status code 404

at createError (createError.js?16d0:16)
at settle (settle.js?db52:18)
at XMLHttpRequest.handleLoad (xhr.js?ec6c:77)

Answer 1

我分享下我的前后台请求的逻辑
这个是axios的：

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
//axios.defaults.headers.post['Content-Type'] = 'multipart/form-data'
axios.defaults.retry = 4
axios.defaults.timeout = 10000
axios.defaults.withCredentials = true
// code状态码200判断
axios.interceptors.response.use((res) => {
    if(res.status === 654) {
        console.log('请求超时！')
    }
    if(res.data.code < 200 && res.data.code >= 300) {
        console.error('数据返回有误')
        return Promise.reject(res)
    }
    return res
}, (error) => {
    let config = error.config
    if(!config || !config.retry) return Promise.reject(error)
    config.__retryCount = config.__retryCount || 0
    
    if(config.__retryCount >= config.retry) {
        console.log('promise error:' + error)
        return Promise.reject(error)
    }
    config.__retryCount += 1
    
    let backoff = new Promise(function(resolve) {
        setTimeout(function() {
            resolve()
        }, config.retryDelay || 1)
    })
    
    return backoff.then(function() {
        return axios(config)
    })
})

Node使用express搭建的服务器：

// 跨域设置
app.all("*", function(req, res, next) {
    if(req.path !== "/" && !req.path.includes(".")) {
        res.header("Access-Control-Allow-Credentials", true);
        // 这里获取 origin 请求头 而不是用 *
        res.header("Access-Control-Allow-Origin", req.headers["origin"] || "*");
        res.header("Access-Control-Allow-Headers", 'Content-Type,Content-Length, Authorization,\'Origin\',Accept,X-Requested-With');
        res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
        res.header("Content-Type", "application/json;charset=utf-8");
    }
    let ip = getClientIp(req)
    ul.getByIP(ip)
    io.emit('updateMapBack', JSON.stringify(m.getMap()))

    next();
});