axios解决跨域问题

编程艺术家 29326 0

     最近把我自己的网站升级生成前后端分离的项目(vue+springBoot),不可避免的就遇到了跨域问题。从中学到了许多知识,随便分享出来,也巩固下所学。

     谈到跨域,首先得了解CORS(Cross origin resource sharing) 跨域资源共享,它是w3c的一个标准,是一份浏览器技术规范,提供了web服务从不同网域传来沙盒脚本的方法,以避免浏览器的同源策略,是比JSONP模式的高级版。JSONP只支持GET请求方式,而CORS除了GET请求方式以外也支持其他的HTTP请求。CORS允许浏览器发送跨域服务器,发出XMLHttpRequest请求,从而克服AJAX只能同源请求。(想要了解为什么有跨域问题的产生,请了解浏览器的同源策略

    浏览器发出CORS请求,需要对请求头增加一些信息,服务器会根据这些信息来是否决定同意这次请求。需要的头信息字段如下:

    (1)Access-Control-Allow-Origin

              这个头信息字段是必须的。它指定允许进入来源的域名、ip+端口号 。 如果值是 ‘*’ ,表示接受任意的域名请求,这个方式不推荐,主要是因为其不安全,而且因为如果浏览器的请求携带了cookie信息,会发生下图错误:

    (2) Access-Control-Allow-Credentials

                该字段是可选的。它设置是否可以允许发送cookie,true表示cookie包含在请求中,false则相反,默认为false。如果项目需要cookie就得设置该字段了。CORS请求默认不发送Cookie和HTTP认证信息的,所以在此基础上同时也需要在前端设置(以axios为例): axios.defaults.withCredentials = true

    (3)Access-Control-Max-Age

                该字段是可选的。用于配置CORS缓存时间,即本次请求的有效期,单位为秒。

    (4)Access-Control-Allow-Methods

              该字段可选。设置允许的请求方法。

     (5)Access-Control-Allow-Headers

             该字段可选。设置允许的请求头信息

      (...)其他请参考相关资料

       提示:这些设置在后端的拦截器中设置。
 

     对于axios,它是vue2提倡使用的轻量版的ajax。它是基于promise的HTTP库。它会从浏览器中创建XMLHttpRequests。如果对axios不太了解,可以先看下这个两个博客:https://www.kancloud.cn/yunye/axios/234845    和   https://www.jianshu.com/p/7a9fbcbb1114

     了解到这些之后就可以解决跨域问题啦, 详细代码如下:

    (1) vue.js

      

转载于:https://blog.csdn.net/xshsjl/article/details/82998470


标签: #vue

  • 评论列表

留言评论