关于第三方API跨域那些事

  我们在项目开发中,使用第三方接口难免会遇到一些跨域问题,而跨域这个话题网上已经讨论了无数遍了。常用的有:

  • jsonp
  • cors
  • 服务端反向代理(因为服务端不存在跨域问题)

  现在推荐的方式是CORS跨资源共享。在我看来,CORS本质是一种白名单,其关字段为 Access-Control-Allow-Origin,通过标记请求发起站点是否可以访问目标站点的资源,达到跨域的目的。CORS支持所有的http方法,可以说是跨域的本质解决方案。jsonp本质是一个hack,现在不推荐使用了。

  那么我们在使用第三方API的时候,API的提供者是怎样处理跨域问题呢?以cnode.js开放平台为例,我们访问一个API接口时,我们发现这些接口的响应头部分包含了Access-Control-Allow-Origin:*,它就是允许所有站点可以跨域访问它的标志。但是有的接口,可能没有这个响应字段。我们在自己造玩具、开发调试的时候怎么处理呢?

vue-cli:2.8.2为例,我们可以在config/index.js中修改如下代代码:

1
2
3
4
5
6
7
proxyTable: {
'/api': { //将www.exaple.com印射为/apis
target: 'http://127.0.0.1:5000', // 接口域名
changeOrigin: true, //是否跨域
secure: false
}
}

这段代码会为 webpack-dev-server 提供一个代理配置,它内部使用http-proxy-middleware,一个非常强大的node代理工具,这个是可以通过反向代理,实现开发中跨域访问接口的。

  那么我们自己来模拟代理要如何来做呢?在学习的过程,我们可以用express作为服务器实现接口转发,这种技术或者叫中间层越来越流行。一般是一传统的Java,PHP,Python, Golang等后台语言作为服务器开发接口,前端通过node中间层来转发接口,返回前端想要的数据格式,极大的提高了接口开发的效率和需求的多样性。现在我们来实现一个简单的express转发接口,实现跨域和返回自己想要的数据。

  我们以 https://www.v2ex.com/api 接口为例,这个接口的响应头没有Access-Control-Allow-Origin字段,所以正常使用axios调用此类接口,虽然可以访问到数据,但是axios本身的跨域错误机制,导致我们无法使用其返回的数据。express登场了,我们将使用它来实现接口转发实现跨域。首先我们准备一个路由文件config/proxy.js

1
2
3
4
5
6
7
8
module.exports = {
'/api/now': 'https://www.v2ex.com/api/topics/latest.json',
'/api/hot': 'https://www.v2ex.com/api/topics/hot.json',
'/api/node': 'https://www.v2ex.com/api/nodes/show.json',
'/api/userinfo': 'https://www.v2ex.com/api/members/show.json',
'/api/replies': 'https://www.v2ex.com/api/replies/show.json',
'/api/topics': 'https://www.v2ex.com/api/topics/show.json'
}

这里我重新定义了接口的名称,你可以把他任意定为你想要的名字。接下来准备一个server.js,也就是我们服务端的主文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const express = require('express')
const path = require('path')
const axios = require('axios')
const app = express()
// 引入第三方路由
const proxyConf = require('./config/proxy')
const headerConf = {
referer: 'https://www.v2ex.com',
host: 'www.v2ex.com'
}

let apiRoutes = express.Router()

for (let k in proxyConf) {
app.get(k, function(req, res) {
axios.get(proxyConf[k], {
headers: headerConf,
params: req.query
}).then(response => {
res.setHeader('Access-Control-Allow-Origin', '*')
res.json(response.data)
}).catch(e => {
console.log(e)
})
})
}

app.use('/', apiRoutes)
app.use(express.static(path.join(__dirname, 'dist')))

const port = process.env.PORT || 5000
app.listen(port)
console.log('server started ' + port)

执行node server.js

  这里关键代码为res.setHeader('Access-Control-Allow-Origin', '*'),我们主动给这个简单的http服务器的响应头设置了允许跨域访问,所以你可以通过axios调用http://127.0.0.1:5000/api/now等接口而不会出现跨域报错的问题。在 res.json(response.data)这个操作之前,我们可以根据请求消息req处理返回消息response.data,比如分页,达到我们想要返回的数据的目的。这样我们就模拟了一个反向代理服务器。^-^

最后,欢迎在GitHub留言,一起学习js,一起进步。