彻底解决前端开发在前后端分离过程中的跨域问题

78 阅读 0 评论 52 点赞

我是靠谱客的博主稳重台灯，最近开发中收集的这篇文章主要介绍彻底解决前端开发在前后端分离过程中的跨域问题，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

现在的web工程越来也大，传统的开发模式已经显得捉襟见肘了，不仅开发人员在开发过程中很痛苦，后期维护的人员也更痛苦。怎么解决呢？前后端分离。在前后端开发过程中一直会伴随我们的问题就是跨域问题，因为这时候前端和后端的代码是在不同机器上运行的，两个地址不在一个域名下，这个时候前端脚本在进行ajax访问的时候浏览器就会报跨域相关的错误。这个时候怎样解决呢？
最简单的做法是通过设置浏览器允许浏览器跨域请求。但是今天我们这里不讲这种方式，有兴趣的可以在度娘上搜“chrome浏览器跨域设置”教程非常详细。这个方式是有局限性的，因为不同浏览器的跨域设置不相同，甚至相同浏览器不同版本的设置都可能不同，我自己现在都只知道chrome的跨域设置，IE和firefox的看过，但是记不住了，总之，设置浏览器跨域，只适合临时用一下。
下面我们介绍一种测地解决前端跨域访问的方式，本地服务器请求转发的方式。
实现的过程就是在我们前端的本地起一个服务，然后我们前端的所有ajax访问首选访问我们本地的服务，本地的服务不会对来的请求做加工处理，只是将请求转发到我们真实的后台服务上去。我们本地的服务其实你就是一个中转站。这种解决方案就是利用后端之间访问是不存在跨域的问题。
现在nodejs火的一塌糊涂，所以对于前端人员来说搭建一个本地转发服务是相当简单的。下面我们就利nodejs+express+http-proxy-middleware构建一个转发服务：
1，安装 nodejs
2，新建一个项目文件夹project
3，在该文件夹中打开dos窗口，安装express和http-proxy-middleware

 npm install express http-proxy-middleware --save-dev

4，新建server.js和public文件夹(用来存我们的前端项目)

var express = require('express');
var proxyMiddleWare = require("http-proxy-middleware");
var proxyPath = "http://xxx.xx.xx.xx:port";//目标后端服务地址
var proxyOption ={target:proxyPath,changeOrigoin:false}
var app = express();
    app.use(express.static("./public"))//这段程序的作用是将我们的前端项目设置成静态资源这样我们在浏览器中就可以直接通过http://127.0.0.1:xxxx/xxx(所在页面的目录层级)访问我们的页面,做到边开发边调试.

    app.use("/login",proxyMiddleWare(proxyOption))//这里要注意"/login" 是匹配的路由,它会将匹配的路由进行转发，没匹配到的就不会转发。
    app.listen(8080);

5，运server.js 在server.js所在的目录打开dos窗口 run server.js.
就这么简单，一个简单的前后端分离的可以跨域的前端开发环境就搭建起来了我们只需要将我们的项目建在public文件夹中就行了。然后proxyPath配置成我们要访问的真实后端服务地址就行了。
现在流行的前端框架vue其实他的webpack配置文件/build/dev-server.js已经实现了请求代理：

require('./check-versions')()

var config = require('../config')
if (!process.env.NODE_ENV) {
  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}

var opn = require('opn')
var path = require('path')
var express = require('express')
var webpack = require('webpack')
var proxyMiddleware = require('http-proxy-middleware')
var webpackConfig = require('./webpack.dev.conf')

// default port where dev server listens for incoming traffic
var port = process.env.PORT || config.dev.port
// automatically open browser, if not set will be false
var autoOpenBrowser = !!config.dev.autoOpenBrowser
// Define HTTP proxies to your custom API backend
// https://github.com/chimurai/http-proxy-middleware
var proxyTable = config.dev.proxyTable

var app = express()
var compiler = webpack(webpackConfig)

var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  quiet: true
})

var hotMiddleware = require('webpack-hot-middleware')(compiler, {
  log: () => {}
})
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
    hotMiddleware.publish({ action: 'reload' })
    cb()
  })
})

// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(options.filter || context, options)) //代理请求
})

// handle fallback for HTML5 history API
app.use(require('connect-history-api-fallback')())

// serve webpack bundle output
app.use(devMiddleware)

// enable hot-reload and state-preserving
// compilation error display
app.use(hotMiddleware)

// serve pure static assets
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./static'))//这是静态资源

var uri = 'http://localhost:' + port

devMiddleware.waitUntilValid(function () {
  console.log('> Listening at ' + uri + 'n')
})

module.exports = app.listen(port, function (err) {
  if (err) {
    console.log(err)
    return
  }

  // when env is testing, don't need open it
  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
    opn(uri)
  }
})