Vue 跨域问题和前后端分离

问题描述

1. 由于服务器的 IP （xxx.xxx.xxx.xx）和本地开发时候的 IP（localhost）不同，浏览器不允许直接跨域访问 IP
2. 在使用 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 的数据来做就行了。

所以以后的开发过程中又学到了新的一招！