使用`express`+`http-proxy-middleware`解决跨域问题

分类:node

在前后端分离的开发场景中,前端生产环境不可避免的会出现跨域的问题,如何依靠前端技术来解决这些问题呢,express给我们提供了一个解决方案

安装 node

首先,我们需要安装 node,已经安装过的小伙伴可以直接跳过。

没有安装的朋友请直接戳此链接

安装express

安装完 node 之后,就可以通过npm来安装express了。输入以下命令

1
2
3
4
$ npm install express-generator -g #安装express
$ express myapp #新建myapp文件夹
$ cd myapp #进入myapp文件夹
$ npm install #安装依赖

安装完成后目录结构一般有如下结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.jade
├── index.jade
└── layout.jade

然后输入

1
$ npm run start

然后在浏览器中打开 http://localhost:3000/ 网址就可以看到这个应用了。

代理转发配置

首先关掉刚才的服务器,然后安装http-proxy-middleware

1
npm i http-proxy-middleware --save-dev

接着,找到你启动的express项目下的app.js文件。

然后我们需要在头部引入插件

1
2
// 代理插件
var proxy = require('http-proxy-middleware');

接着在404配置之前,也就是在这段代码之前

1
2
3
4
5
6
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});

添加以下代码

1
2
3
4
5
6
// 设置代理
app.use('*', proxy({
target: 'https://api.douban.com/',
changeOrigin: true
}));
// 将https://api.douban.com/替换成你想要转发的服务器地址

比如我们现在要抓取https://api.douban.com/v2/music/search?q=周杰伦地址下的数据,那么我们需要在public文件夹下新建index.html,然后代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function ajax(url) {
var xml = new XMLHttpRequest();

xml.open('GET', url, true);

xml.onreadystatechange = function() {
if (xml.readyState == 4 && xml.status == 200) {
console.log(JSON.parse(xml.responseText));
}
}

xml.send();
}

ajax('此处可以不加地址/v2/music/search?q=周杰伦')

然后输入npm run start,就可以在控制台看到抓取到的数据啦。是不是已经没有跨域的问题了呐。

继续改进

经过前几步的疯狂操作,我们已经实现了前端的代理转发。但是问题还是有的,那就是文件只能在当前端口获取数据。

比如我需要增开另外一个本地服务器来进行开发,要知道两个端口是不能重复呢,那么此时想要在这个端口之下获取另外一个端口的数据又会出现跨域问题。那该如何解决呐。

答案就是通过cors将设置access-control-allow-origin:*;

可以通过现有的插件CORS

食用方法如下:

首先打开命令行工具

1
$ npm install cors --save-dve

然后打开app.js,配置如下

1
2
3
4
5
var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

然后npm run start打开服务器。

接着,我们在桌面新建一个index.html文件,代码如下

1
2
3
4
5
6
7
8
$.ajax({
type: "get",
url: "http://localhost:3000/v2/music/search?q=周杰伦",
success: function (response) {
console.log(response)
}
});
// 代理转发的服务器地址是localhost:3000,所以将https://api.douban.com替换成localhost:3000就可以了,代理服务器会自动转发

我们再新开一个服务器,然后打开index.html文件,此时我的客户端地址端口是 8080,打开控制台查看,是不是也成功拿到数据了呢。

PS:Ajax 需要在服务器环境下测试哟。别忘了新开一个服务器

补充 >>>>>>>>>>>>>>>>

vue-cli 中实现跨域

如果你使用 vue-cli 开发的项目,那么就更简单啦,只需要在config/index.jsdev中添加设置:

1
2
3
4
5
6
proxyTable: {
'*': {
target: 'https://api.douban.com',
changeOrigin: true,s
}
},

在开发环境中将会自动在请求前面添加https://api.douban.com