vue axios发送post请求，怎么设置请求头解决跨域

Question

login_admin () {
      let self = this;
      var reg = /^0?1[3|4|5|6|7|8|9][0-9]\d{8}$/;
                 if (reg.test(document.getElementById('userName').value)==false){
                     alert("请输入正确的手机号");
                     return false;
                 }
                 if (document.getElementById('verification').value == null||document.getElementById('verification').value == "") {
                     alert("请输入验证码");
                     return false;
                 }
            

     return axios.post('http://192.168.3.100/abc/adminLoginCheck.action','mobile='+this.user+'&admin_vcn='+this.vcn,{'xhrFields' : {withCredentials: true},crossDomain: true})

          .then(function (response) {
            console.log(response);
            self.response = response.data;
            
            if (response.data == 1) {
                //添加缓存信息
          self.toHome(self.response);
            }else {
                alert("登录失败");
                return;
            }
            })
          .catch(function (error) {
              alert("登录程序异常");
            console.log(error);
          });
    },

这是我的代码

这是后端给的请求头

response.setHeader("Access-Control-Allow-Origin", "*");// 跨域问题
response.setHeader("Access-Control-Allow-Methods", "GET,POST");// 跨域问题
response.setHeader("Access-Control-Allow-Headers","Origin, X-Requested-With, Content-Type, Accept");// Content-Type问题
response.setHeader("Charset", "UTF-8");
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setContentType("text/html;charset=UTF-8");
response.setDateHeader("Expires", 0);
response.setHeader("Last-Modified", modDate);
response.setHeader("Expires", expDate);
response.setHeader("Cache-Control", "public"); // HTTP/1.1
response.setHeader("Pragma", "Pragma"); // HTTP/1.0

要如何添加进去呢

Answer 1

跨域在后端设置就行，前端中如果用到withCredentials: true，那么后端需要设置response.setHeader("Access-Control-Allow-Credentials", "true");才能使cookie携带上来，同时，Access-Control-Allow-Origin这个白名单需要设置当前前端访问时的浏览器上的域名或ip。

Answer 2

vue跨域可以使用自带的proxyTable功能，打开工程找到config/index.js 搜索proxyTable参数，修改如下：

proxyTable: {
    '/abc': {
        target: 'http://192.168.3.100',
        secure: false,
        changeOrigin: true,
    }
},

设置好 你再试试。。。

Answer 3

这叫跨域资源共享CORS，前端不需要做什么，只需要后台添加，就可以进行跨域访问了，一般不建议这样进行跨域，很容易遭XSS，用反向代理服务器不是更好吗