使用第三方库
在搞Vue开发时，绕开后端API服务器的方法并不新鲜。比如，碰到烦人的CORS跨域问题，我们就让代理来解决。但有时候，我们还得直接去跟API服务器沟通。这时候，借助第三方库，比如Axios这个HTTP客户端库，就能轻松应对。这样一来，我们在Vue项目中发送请求、处理响应也就游刃有余了！
先用npm或yarn安装上Axios，接着把它导入想要发请求的组件里面。别忘了设置头部和参数，这样才能和API服务器愉快聊天。比如想请API服务器帮忙拿东西，那就用Axios的get方法发送GET请求，再加上header的contentType: application/json这个要求，搞定！
这么弄的话咱就不用通过中介程序，可以直接和API服务器手牵手了，前后端交流也更灵活咯～
使用Webpack Plugin
除了外挂第三方包，用Webpack插件也能解决跳过代理的问题！简单的操作就是将Express和http-proxy-middleware这俩插件搭配使用，在自家电脑装个小服务器来替代代理服务器。这样就能直接连到API服务器。
具体实现步骤如下：
npm install axios --save
首先，先要安装好Express跟Http-Proxy-Middleware这俩插件！
就在项目里加个名叫’server.js’的文件，这就是启动本地服务要用到的！
首先咱得让’server.js’这个文件搞上express服务。然后借助http-proxy-middleware插件，设定好代理规则，把所有请求都转发给目标API服务器！
要用 Vue 的组件发送请求？只需要把我们本地搭建好的那台服务器地址填进去就好了
搞定这几个步骤，就可以直接和API服务器聊天了，前后端接口调试、管理的工作都变得轻松不少！
跨域资源共享（CORS）问题
import axios from 'axios'
axios.get('/api/getUserInfo', {
headers: {
'Content-Type': 'application/json'
}
}).then(res => {
console.log(res)
})
说到前后端分离式开发，我们可得注意那个坑爹的“浏览器同源政策”。你知道吗？这是个针对跨网站数据传输的规定。举个例子，你想想看，前端网页在自己的地盘localhost:8080上打转儿，但是后台API服务却待在localhost:3000那儿。这时候，哦豁，不让人头疼的跨域问题就来了。
遇到跨域ＣＯＲＳ问题，咱常用的办法就是在后头设置个“允许跨域访问”，比如加上”Access-Control-Allow-Origin”头条什么的，或者把以前的代理发转发搞定。但有的时候，咱就是想摆脱这些规矩，想跟API服务器直接交流！
原生Fetch API
给你个小tips，不只是AXios，你还有原生Fetch API可以用~这玩意儿是专门针对Promise设计出来的，应付大多数浏览器都没问题。有了它，你就能轻而易举地发出GET、POST等各种HTTP请求，并且还能自由设置请求头部和参数这些细节！
别怕，用fetch!vue组件中，用这个叫fetch的函数就能搞定了。你只要指定好要连的网址，它就能自动响应并回传结果。相较于其他像Axios那样的库，它简单得让人惊艳，而且还有内置的Promise功能！
WebSocket通信
不用只知道HTTP那个常用方式了，有时候试试WebSocket也挺好。它就像搭了个TCP的桥把两边的声音都传过去，特别适合前后端传东西的时候。
简言之，咱们通过在Vue项目中安装像’Socket.io-client’这种WebSocket工具包，再配合上Websocket网络就可以轻松搞掂前后端的实时通信！这样一来，站在网页上看服务器传过来的数据，就能马上响应，你看起来也就更赞啦～
GraphQL查询语言
哈喽！想要处理麻烦点儿的数据查询？试试看 GraphQL这款由脸书搞出来的货色，它就是个查询语言加上运行时环境，帮你把数据查询变得更快、更好、更溜儿。
你只要在你的项目里安装个叫做Apollo Client的GraphQL客户端库，然后填写下GraphQL服务器地址和查询语句这些信息，就可以用Vue组件发出查询，搜刮你想要的数据！GraphQL比起之前那种RESTful风格的接口要快得多，也好用多了，它可以让你一次找到你想要的所有数据，甚至可以检索多层级的数据！
npm install express http-proxy-middleware --save-dev
Mock数据模拟
接口没完全弄好，或者有时候连不上真实的服务器，别急！用 Mock 数据模拟工具试试看。
哦吼！Mock.js真是太牛逼了，搞前端模拟数据就靠它。只要照着正常接口样子弄些假数据出来，然后再借用axios-mock-adapter这个小伙伴，Ajax请求模拟调试也就没那么难了。
安全性考虑
哦对了，我们可要留意和 API 服务器之间交流的安全性！就说像传密钥这种事儿，就要用HTTPS确保不会出问题；另外千万别掉以轻心，像XSS和CSRF之类的网络陷阱可得提防着点；还有就是，设置好CORS策略才不会让咱的私人数据轻易地落入坏人手里
反正嘞，做Vue项目的时候和API服务器搞些花样特别多啊：比如用Axios、fetch API这样的大家伙，也能用到WebSocket这种高科技玩法，或者试试看GraphQL查数语啥的。再搭配上模拟数据mock一下，应付各种怪事完全不在话下，前端后端的合作也会变得更加愉快！
const express = require('express')
const proxy = require('http-proxy-middleware')
const app = express()
app.use('/api', proxy({
target: 'http://api.server.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}))
app.listen(3000, () => {
console.log('Server is running at localhost:3000')
})
。
评论0