Vue axis 代理請求不成功,跨域并報(bào)錯(cuò)

1.vue axios跨域請求,后臺(tái)已配置允許跨域,代理訪問的時(shí)候還報(bào)錯(cuò)跨域
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.請求結(jié)果報(bào)錯(cuò)

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)

回答

編輯回答

情未了

我分享下我的前后臺(tái)請求的邏輯
這個(gè)是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狀態(tài)碼200判斷
axios.interceptors.response.use((res) => {
    if(res.status === 654) {
        console.log('請求超時(shí)！')
    }
    if(res.data.code < 200 && res.data.code >= 300) {
        console.error('數(shù)據(jù)返回有誤')
        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搭建的服務(wù)器：

// 跨域設(shè)置
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();
});

2017年6月24日 06:47