WebPack系列之Proxy

背景

当我们直接去访问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进行身份确认,最终对接口的访问.