问题描述
- 由于服务器的 IP （xxx.xxx.xxx.xx）和本地开发时候的 IP（localhost）不同，浏览器不允许直接跨域访问 IP
- 在使用 Vue 开发商家管理系统网页的时候，由于前端和后台是同步进行，所以经常会出现后台崩了，前端开发也就停止了。前后端没有完全分离搞得我们很难受，所以我们希望找到一个
问题分析
对于第一个问题，跨域问题最直接的解决办法就是在本地跑一个服务器就行。但是这显然不现实，所以自然的我们就可以想到在本地跑一个中转服务器，来转发请求。这样浏览器向本地服务器 localhost 发请求，而本地服务器原封不动转发请求，并返回。这样就解决了这个问题
这里我使用了 express 快速搭建，下面的代码就是在本地 3000 端口完全转发本地前端页面发起的 GET 请求
const express = require('express')
const app = express()
const request = require('request')
const apiRoot = 'http://xxx.xxx.xx.xx'
app.get('/', function (req, res) {
console.log('sending request to ' + url)
let options = {
headers: {},
url: apiRoot ,
method: 'GET',
json: true,
body: req.body
}
function callback (error, response, data) {
if (!error && response.statusCode === 200) {
console.log(data)
res.json(data)
}
}
request(options, callback)
})
app.listen(3000, () => console.log('listen on port 3000'))
这样只是解决了第一个问题，但是第二个前后端分离的问题还是没有解决。前后端分离的关键是 API 文档的设立，只要 API 文档定下来，前端就用一个 mock 的数据来做就行了。
所以以后的开发过程中又学到了新的一招！
