使用Node.js的request库做代理

首先安装 request 和 axios依赖, axios 用作ajax请求:

cnpm install request --save-div  
cnpm install axios --save   

完成安装后,在项目根目录新建proxy.js的文件,配置代理:

const http = require('http');
const request = require('request');

const hostname = '127.0.0.1';
const port = 8010;

// 创建一个 API 代理服务
const apiServer = http.createServer((req, res) => {
    const url = 'http://news-at.zhihu.com/api/4' + req.url;
    const options = {
        url: url
    };

    function callback (error, response, body) {
        if (!error && response.statusCode === 200) {
            // 设置编码类型,否则中文会显示为乱码
            res.setHeader('Content-Type', 'text/plain;charset=UTF-8');
            // 设置所有域允许跨域
            res.setHeader('Access-Control-Allow-Origin', '*');
            // 返回代理后的内容
            res.end(body);
        }
    }
    request.get(options, callback);
});
// 监听 8010 端口
apiServer.listen(port, hostname, () => {
    console.log(`接口代理运行在 http://${hostname}:${port}/`);
}); 

使用 axios 用作ajax请求 ,封装为util.js,代码如下:

import axios from 'axios';

const Util = {   
    apiPath: 'http://127.0.0.1:8010/'
};

// Ajax 通用配置
Util.ajax = axios.create({
    baseURL: Util.apiPath
});

// 添加响应拦截器
Util.ajax.interceptors.response.use(res => {
    return res.data;
});

export default Util; 

然后在 vue.js 的组件中的测试代码:

<template>
    <div>测试:{{data}}</div>
</template>

<script>
import $ from './util';
export default { 
    data(){
        return {
            data:[]
        }
    },
    mounted () {
         $.ajax.get('themes').then(res => {
            this.data = res.limit;
        })
    }
}
</script> 

分别在终端命令中启动代理,和启动服务:

node .\proxy.js
#成功显示日志:接口代理运行在 http://127.0.0.1:8010/
cnpm run dev

发表评论

电子邮件地址不会被公开。 必填项已用*标注