前后端分离项目需要解决第一个问题就是,前端本地开发时如何解决通过 ajax 请求产生的跨域的问题。一般的做法是通过本地配置 nginx 反向代理进行处理的,除此之外,还可以通过 nodejs 来进行代理接口。当然,要实现这个前提是,前端开发环境必须运行在 nodejs 服务中,所幸的是,现在前端的开发自动化工具都是建立在 nodejs 上的,所以这个前提也不是很重要。
如果你项目是用 webpack 作为前端自动化构建工具的话,那么可以引用 webpack-dev-server 来进行配置跨域方案。webpack-dev-server 是一个小型的 nodejs 服务器,是基于 express 框架的,用于实时监听和打包编译静态资源。其中里面有一个属性是 proxy,是专门来配置代理请求接口的。
举个例子:
比如我现在通过 webpack 构建了一个本地开发环境,端口号是 9000,现在我要在本地去请求 (GET) http://jsonplaceholder.typicode.com/users 地址获取数据,如果前端没有设置代理的话,请求会因为跨域请求失败。这时候通过如下配置,就可以正常请求了。
- devServer: {
- contentBase: __dirname + "/",
- port: 9000,
- proxy: {
- "/users": { //需要代理的路径
- target: "http://jsonplaceholder.typicode.com",
- //需要代理的域名
- changeOrigin: true //必须配置为true,才能正确代理
- }
- }
- }
通过如上配置,然后在 js 里面这样请求就可以成功拿到数据了:
- //使用fetch获取ajax请求
- fetch('/users') //填写路径即可
- .then(function(response) {
- return response.json()
- }).then(function(json) {
- console.log('parsed json', json)
- }).
- catch(function(ex) {
- console.log('parsing failed', ex)
- })
这是通过 webpack-dev-server 配置的代理方案,那如果没有 webpack-dev-server 服务,要如何配置代理方案呢?比如在 gulp 和 fis 环境中,要怎么设置 nodejs 的代理服务。这时候我们就得来追寻下 webpack-dev-server 代理的实现机制了。
如果仔细阅读 webpack-dev-server 的文档,就会发现其实 webpack-dev-server 的代理方案是引用了 http-proxy-middleware 模块来设置的。这里要注意的是 http-proxy-middleware 模块也是运行在 nodejs 服务,因此前端需要运行一个 nodejs 服务,这里以 express 为例子:
- varexpress = require('express');
- varproxy = require('http-proxy-middleware');
- varapp = express();
- app.use('/users', proxy({
- target: "http://jsonplaceholder.typicode.com",
- changeOrigin: true
- }));
- // 省略各种配置 ... ...app.listen(..., 9000);
如上面代码展示,我们就可以在本地端口 9000 访问到 http://jsonplaceholder.typicode.com/users 的数据,其请求接口和上面一直。其实这段代码跟 webpack-dev-server 代理很相似的,应该说一样的,因为本来就是同一个东西的。在这里就不做更多介绍了,如果需要了解更多直接去看官方文档 https://github.com/chimurai/http-proxy-middleware
来源: http://www.cnblogs.com/canfoo/p/6912306.html