VUE AXIOS 跨域问题

佚名 6年前 (2019-04-17) 随笔 1427人围观抢沙发百度已收录

背景：

后台跨域使用通配符：context.Response.Headers.Add("Access-Control-Allow-Origin", "*");

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

前端使用VUE axios 请求：

getData() {
this.$axios.get('http://127.0.0.1:8080/xxx/xxxxx',{
headers: {
"Content-Type":"application/json;charset=utf-8"
}
}).then( (response) => {
if( response.data.code === '0000'){
this.items = response.data.data.xxx;
console.log(this.items)
}
})
}

View Code

调试：

报错：The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is ' include' 解决： https://laracasts.com/discuss/channels/requests/request-to-api-cross-domain-cors-error

添加 credentials: 'omit',

getData() {
        this.$axios.get('http://127.0.0.1:8080/xxx/xxxxx',{
          headers: {
            "Content-Type":"application/json;charset=utf-8"
          },
          credentials: 'omit',
        }).then( (response) => {
          if( response.data.code === '0000'){
            this.items = response.data.data.xxx;
            console.log(this.items)
          }
        })
      }

View Code

释义：https://developer.mozilla.org/zh-CN/docs/Web/API/Request/credentials

credentials 是Request接口的只读属性，用于表示用户代理是否应该在跨域请求的情况下从其他域发送cookies。这与XHR的withCredentials 标志相似，不同的是有三个可选值（后者是两个）：

omit: 从不发送cookies.
same-origin: 只有当URL与响应脚本同源才发送 cookies、 HTTP Basic authentication 等验证信息.(浏览器默认值,在旧版本浏览器，例如safari 11依旧是omit，safari 12已更改)
include: 不论是不是跨域的请求,总是发送请求资源域在本地的 cookies、 HTTP Basic authentication 等验证信息.