鍍金池/ 問(wèn)答/HTML/ Vue axios跨域請(qǐng)求問(wèn)題

Vue axios跨域請(qǐng)求問(wèn)題

1.vue axios跨域請(qǐng)求,后臺(tái)已配置允許跨域,代理訪問(wèn)的時(shí)候還報(bào)錯(cuò)跨域
2.配置了代理訪問(wèn)地址還是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.請(qǐng)求結(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)
回答
編輯回答
怣人

你這個(gè)報(bào)錯(cuò)是因?yàn)槟愕恼?qǐng)求中除了安全的頭部字段額外加了Access-Control-Allow-Origin,后臺(tái)并不允許這個(gè)字段
解決辦法
后臺(tái)配置響應(yīng)頭Access-Control-Allow-Headers中加上Access-Control-Allow-Origin

2017年5月14日 10:47
編輯回答
撥弦

還需要設(shè)置Access-Control-Allow-Headers, 設(shè)置為這個(gè)值Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers試試

參見(jiàn)https://stackoverflow.com/que...

2017年4月23日 08:59