Vue 中使用Axios跨域请求问题解决记录

                              

       在学习vue的时候,在网上找了一些解决方案,发现很多要不就是启用代理服务器来跨域,要不就是一堆axios的封装函数贴上来,没有从根本上解决问题.最后有幸看到了关于cros的相关文章,找到了解决方法.

       当前端发送请求格式为post方式时,浏览器检测到跨域请求时,会发送一个OPTIONS类型的预检请求,而服务器要设置相应的规范,也就是请求是否被允许访问.如果服务器没有设置,预检失败,我们的请求时调不到后台接口的.所以给服务器端添加拦截器,在里面

配置响应体的header.

       response.setHeader("Access-Control-Allow-Origin", "*");//允许访问的来源地址

       response.setHeader("Access-Control-Allow-Headers","Content-Type,Content-Length, Authorization, Accept,X-Requested-With");//有些会把token放到header里,加在这里

       response.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");//这个一看就懂,

需要设置预检时间的请看最下面.

那预检请求完成之后,前端就会拿到这些响应头

那只要你这次发送的请求,符合这个头规范,那么请求就会成功的.

如果把前端和服务器比作儿子和爸爸……

前端:爸爸,我要钱

服务器:儿子,你只要好好学习就给你,

前端:恩呢,我才把钢铁是怎样练成的看完了,还考了99分.

服务器:儿子,好样的,给你2块!

 

       下面就是在执行跨域请求的实际测试.

        跨域一般请求方式分为get和post,

        1.当请求为get请求,不执行预检

this.$http.get("http://xxxxx:8090/api/getMsg?id=1").then(fun

ction(response){});                        

          2.    当请求为post方式时 ,执行预检

 this.$http

        .post("http://xxx:8090/api/doLogin", {

          userName: "1",

          password: "1"

        })

        .then(function(response) {

          console.log(response);

        })

        .catch(function(error) {

          console.log(error);

        });

 

第一次使用option方法发送预检请求,检测服务器是否接受该请求

 

该请求只是为了检测咱们的请求是否能通,不会有响应体返回,也就是response是为空的.

当预检请求通过后,执行普通请求,也就是post请求

成功返回数据.

    response.setHeader("Access-Control-Max-Age", time);

Access-Control-Max-Age 这个响应首部表示预检请求的返回结果（即 Access-Control-Allow-Methods 和Access-Control-Allow-Headers 提供的信息） 可以被缓存多久。单位为秒,而使用chorme浏览器的默认值为5秒,如果你不设置并且手速很快,你会看到

除了一次预检,其余所有都是普通请求,前提的你是请求的路径一样,假如请求路径改变了,也会进行预检.