彻底解决前端开发在前后端分离过程中的跨域问题
2018-04-26 15:17
801 查看
现在的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-dev4,新建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 APIapp.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) } })在进行vue前端开发中我们在npm run dev 后其实就是相当在本地启动了一个静态服务器。
这样我们就可以跨域请求了。 阅读更多
相关文章推荐
- 关于TP5视图分离到根目录的解决方法 原有: 为了方便前端开发,我想把视图(view)部分分离出来专门给前端进行修改 过程:在进行视图设置分离的过程遇到了问题 参考了官方文档http://www
- Vue proxyTable 开发环境下前端和后端真实数据对接问题和解决跨域
- 用 Nokitjs 解决前端开发中的跨域问题
- 前后端分离跨域问题解决方案
- 前后台分离开发,nginx解决跨域问题
- vue2 前后端分离项目ajax跨域session问题解决方法
- 前后端分离跨域问题解决方案
- SpringMVC之前后台分离开发,联调时的跨域问题的解决方法
- nginx配置反向代理解决前后端分离跨域问题
- 前后端分离nginx配置,同时解决跨域问题
- 前后端分离 跨域问题解决
- 使用http-proxy-middleware解决前端开发中跨域的问题
- 前后端分离跨域 关于前后端分离开发环境下的跨域访问问题(angular proxy=>nginx )
- nginx配置反向代理解决前后端分离跨域问题
- vue2 前后端分离项目ajax跨域session问题解决
- java 浅析跨域问题以及如何使用Cors解决前后端分离部署项目所遇到的跨域问题
- 前端与服务器分离开发出现跨域问题,jsonp与gulp-connect注意点,angularjs改造
- BLUENESSG 早一日受苦、早一日解决、早一日浴火重生 Maven多模块,Dubbo分布式服务框架,SpringMVC,前后端分离项目,基础搭建,搭建过程出现的问题
- 前端后端分离,怎么解决SEO优化的问题?