背景
当我们直接去访问https://m.weibo.cn/api/config/list时由于端口、域名的不同产生了跨域,无法请求到资源数据.
分析
WebPack中devServer的proxy代理其实是集成了http-proxy-middleware
var express = require('express');
var proxy = require('http-proxy-middleware');
var app = express();
app.use('/api', proxy({target: 'http://www.example.org', changeOrigin: true}));
app.listen(3000);
配置proxy 过程中,option的配置相当与配置了http-proxy-middleware的api
proxy:{
'/api': {
target: 'https://m.weibo.cn',
changeOrigin: true
}
}
注意:changeOrigin是将基于名称的虚拟托管网站的选项changeOrigin
设置为true,如果不配置请求就会报404错误
当我们配置好代理后,就可以解决了跨域问题,访问到数据资源
$.get('/api/config/list',function (data) {
console.log(data);
})
get请求打印出数据如下:
如何想在控制台打印消息记录则添加配置项 logLevel: 'debug',同时当访问的接口需要先登录,可以通过添加配置项header设定cookies进行身份确认,最终对接口的访问.