vue-source跨域请求被拒绝，后端相同设置，jQuery ajax可以请求

Question

1、vue-source跨域问题，已经在后端设置了response.setHeader("Access-Control-Allow-Origin", "*");使用jQury请求后端可以响应，但采用VueSource就报---Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.---
代码如下：《jQuery的和VueSource的都在下面》

userSignin:function({commit}, user){

/* var loginFlag=false; //false

        $.ajax({
            type:"post",
            url:"http://localhost:80/StockAnalyse/LoginServlet",
            data:"flag=ajaxlogin&loginName="+user.name+"&loginPwd="+user.id,
            async:false, //这里没有用promise，须设置为同步，
            dataType:"json",
            success:function(data){
              loginFlag=true;
            },
            erro:function(){
              console.log("something wrong");
            }
         });    
          if(loginFlag){
           commit("userSignin", user);  
         }    */               
     Vue.http({
      method:"post",
      url:"http://localhost:80/StockAnalyse/LoginServlet",
      data:{"flag":"ajaxlogin","loginName":user.name,"loginPwd":user.id}, 
      //data:
      headers: {"X-Requested-With": "XMLHttpRequest"},  
      credientials:false, 
      emulateHTTP: true     
    }).then(function(response){
      console.log("it's done"+response.string());
      commit("userSignin", user);  

其实就开发时涉及到跨域，后面会把前端直接扔到后端服务器项目包里，就不存在跨域的问题了， 求大神写支支招，Vue的文档https://github.com/pagekit/vu...提供的内容确实有限

               
    },function(response){
      console.log("game over");
    });

Answer 1

其实和选择什么方式无关，既然服务器端允许跨域，那采用这个方式应该是可以的，后面结合jquery默认配置看，配置VUE-RESOURCE时缺少传输的网络文件类型缺少配置，headers: Content-Type不设置，默认值为json/application，在cors定义中，如果Content-Type值不为application/x-www-form-urlencoded，
multipart/form-data或text/plain，都被视为非简单请求，即预检请求。所以会报Response to preflight request doesn't pass access control check

      Vue.http({
      method:"post",
      url:"http://localhost:80/StockAnalyse/LoginServlet",       
      params:{"flag":"ajaxlogin","loginName":user.name,"loginPwd":user.id}, 
      headers: {"X-Requested-With": "XMLHttpRequest"},
      headers: {'Content-Type': 'application/x-www-form-urlencoded'}, //新增加
      credientials:false, 
      emulateJSON: true     
    }).then(function(response){
      console.log(response.data);
      commit("userSignin", user); 
      return true;
    },function(response){
      console.log("game over");
      return false;
    }); 

Answer 2

后台的那个回调函数有没有对应，就是$.ajax中的"jsonp"这个属性

Answer 3

题主可以对比一下jQuery和vue-resource发送的请求头看看区别

如果只是开发时需要请求后端api，更简单的方法是设置代理，这样开发和生产环境都不需要跨域，可以保证代码一致

webpack-dev-server设置代理的方法

// webpack.config.js
{
    devServer: {
        proxy: {
            // http://localhost/api 代理到 http://server/api的设置
            '/api': {
                target: 'http://server/'
            }
        }
    }
}

Answer 4

可以试下 CORS

Answer 5

我觉得是预检没有通过。你看看是不是又一个options请求

Answer 6

我也是这个问题，怎么解决的，用我本地用ajax去访问就可以，但是vue访问就不行？