Vue:前后端数据联调

前言

前后端分离以后,数据的获取渲染都由前端完成。后台只提供纯粹的数据,以JSON为主。因此在获取数据的过程中会遭遇诸如跨域、HTTP请求错误、前端提交数据格式错误等诸多问题。因此本文将结合自身开发经验,讨论在前后端分离过程中,数据获取的一些经验。

什么是跨域?

这些年我们处理过的跨域——援引博客园 幻精灵的一篇文章,本文详细的介绍了什么是跨域,以及相关的跨域方法

JAVA中的解决方法

常规跨域请求Http Header 设置

      response.setHeader("Access-Control-Allow-Origin", "domain");//设置能够访问的域,"*"为任意可访问
      response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE, PATCH");//设置能够访问的http method
      response.setHeader("Access-Control-Allow-Headers", "Token,Origin, X-Requested-With, Content-Type, Accept");//设置能够访问的http header
      response.setHeader("Access-Control-Max-Age", "3600");//设置超时时间

 如前端(通常指JavaScript的AJAX)需要在请求后端后访问后端设置的某一Http Header,则后端需要设置响应跨域许可,如下:
    response.setHeader("Access-Control-Expose-Headers","Token");//设置响应能够访问的http header

其中这条规则

response.setHeader("Access-Control-Expose-Headers","Token");//设置响应能够访问的http header

需要小本本记下来,后文将会提到

前端在跨域中的实践

推荐跨域工具——axios

axios——现代浏览器的ajax工具,支持promise的用法,解决前端异步方法中回调地狱问题,支持标准的GET POST PUT DELETE等请求方法。在node上通过配置axios请求,也支持流的处理。

一般使用方法

import axios from 'axios'; // 通过npm安装模块化后进行引用


axios.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8';// 将HTTP请求中body设置为JSON格式,默认为表单提交


axios.get(URL, {headers:{ session: 'bamboocloud'}, timeout: 15000 }) 

  .then(res => {

    // TODO 

  })

  .catch(err => {

    console.log(err.response)

  })                                 

通过GET方法请求后台提供的API接口,其中第二个对象为设置参数,这里新增了一个请求头session,值为bamboocloud,设置了超时时间,以ms为单位。一般来说,我们把认证相关信息如session、token等放在请求头中,这样后台就能通过

@RequestHeader("XXX")

 String XXX 注解获取我们传过去的请求头。

在then方法中返回的res是axios返回的对象,它有如下的数据结构
{

//`data` is the response that was provided by the server

  data:{},
//`status` is the HTTP status code from the server response

  status:200,
//`statusText` is the HTTP status message from the server response

  statusText:'OK',
// `headers` the headers that the server responded with

// All header names are lower cased

  headers:{},
//`config` is the config that was provided to `axios` for the 
requestconfig:{},
//`request` is the request that generated this response
// It is the last ClientRequest instance in node.js (in redirects)
//and an XMLHttpRequest instance the browser
request:{}
}

其中data就是后台返回给我们的实际对象,status是请求的状态,注意,只有2XX才会走then回调,即成功回调。4XX,5XX都会走catch回调,如果没有写catch,则会抛出报错信息到全局,err是这个错误对象信息。

如果后台设置了错误信息,比如错误也会带body,那么通过err.response获取。

headers是这个请求的响应头,默认只有content-type,cookie能够被获取到。

想加载后台给我们的自定义header,一定要设置前文提到的

Access-Control-Expose-Headers。

常见误区

  1. 因为前后端分离,因此部署网页的服务器和提供API的服务器不是一台服务器。因此常见于后台通过创建session标记一个客户端的方法会失效。请求html文档,和axios请求方法会创建两个不同的session
  2. 因为默认是跨域的,而跨域默认是不带cookie的,推测这个是导致session不一致的原因(未验证)。可以通过设置{ withCredentials = true },让axios请求携带cookie,注意这种方法,后台 Access-Control-Allow-Origin 不能设置为 * ,必须指定具体的域名或者IP地址
  3. 后台传输JSON一定要添加@ResponseBody注解,否则会报404错误,建议在controller类上添加该注解

推荐的实践

在开发环境中,可以允许所有跨域。但是建议部署到生产环境,设置为指定IP地址或者域名提高安全性。

就是这样:)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏你不就像风一样

Gradle构建工具简明教程(IDEA篇)

GRADLE_USER_HOME 的作用是让其他程序检测到本地.gradle文件夹的位置,

1501
来自专栏Java后端技术

带你深度解析Maven

  Maven是基于项目对象模型(POM project object model),可以通过一小段描述信息(配置)来管理项目的构建,报告和文档的软件项目管理工...

811
来自专栏运维咖啡吧

LDAP落地实战(一):OpenLDAP部署及管理维护

上边来了一堆的名词解释,看的云里雾里,还不是很明白,怎么跟自己的组织架构对应起来呢?看看下边的图是不是清晰明了

2903
来自专栏前端之心

dig 命令洞察 DNS 解析过程

在上一篇文章,我们介绍了域名解析的过程,本章我们将介绍一个实用的工具---dig命令,通过dig命令我们可以查看 DNS 解析的过程,以便我们更好的理解 DNS...

5297
来自专栏博客园迁移

dubbo见解

  服务容器负责启动,加载,运行服务提供者。   服务提供者在启动时,向注册中心注册自己提供的服务。   服务消费者在启动时,向注册中心订阅自己所需的服务。  ...

1492
来自专栏博客园

WCF

  WCF(Windows Communication Foundation)是由微软开发的一系列支持数据通信的应用程序框架,可以翻译为Windows通信开发平...

2203
来自专栏私有云搭建

腾讯云+kodexplorer可道云搭建私有云盘

KodExplorer可道云,原名芒果云,是基于Web技术的私有云和在线文件管理系统。致力于为用户提供安全可控、可靠易用、高扩展性的私有云解决方案。用户只需通过...

7025
来自专栏黑泽君的专栏

linux中mv命令使用详解

mv命令是move的缩写,可以用来移动文件或者将文件改名(move (rename) files),是Linux系统下常用的命令,经常用来备份文件或者目录。

1980
来自专栏大前端_Web

cordova 安卓开发环境搭建(Mac OSX

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

1344
来自专栏nice_每一天

理解 IntelliJ IDEA 的项目配置和Web部署

IDEA 中最重要的各种设置项,就是这个 Project Structre 了,关乎你的项目运行,缺胳膊少腿都不行。最近公司正好也是用之前自己比较熟悉的IDEA...

3592

扫码关注云+社区

领取腾讯云代金券