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

Denzel
  • 3.2k

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");
    });
回复
阅读 6.3k
6 个回答
✓ 已被采纳

其实和选择什么方式无关,既然服务器端允许跨域,那采用这个方式应该是可以的,后面结合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;
    }); 

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

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

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

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

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

可以试下 CORS

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏