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

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");
    });
阅读 5.4k
评论
    6 个回答
    • 2.7k

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

        • 2.4k

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

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

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

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

          可以试下 CORS

            • 4.7k

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

              • 3
              • 新人请关照

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

              该答案已被忽略,原因:

                撰写回答

                登录后参与交流、获取后续更新提醒

                相似问题
                推荐文章