javaLuo / react-luo

React Automatically - 保持最新技术 react18 hooks router6 webpack5 babel7 antd4
https://isluo.com/work/pwa/
MIT License
312 stars 71 forks source link

这个脚手架上怎么设置请求代理? #23

Closed webjsjq closed 5 years ago

webjsjq commented 6 years ago

service.js中加了如下代码

const proxy = require('http-proxy-middleware');//引入代理中间件
const apiProxy = proxy('/api', {
        target: 'https://api.douban.com',
        changeOrigin: false
    });
    app.use('/api', apiProxy);

image image

javaLuo commented 6 years ago

嗯...我没弄过请求代理。
记得在webpack里可以配置proxy来着,不知道行不行
我回头试试

javaLuo commented 6 years ago

试了一下,可以成功代理:
server.js中加入以下代码:

const proxy = require("http-proxy-middleware");

const options = {
    target: 'https://api.douban.com', 
    changeOrigin: true,
    ws: false,
    pathRewrite: {
        '^/api/' : '/'
    },
};

const testProxy = proxy(options);
app.use('/api', testProxy);

然后请求以下地址:

axios({
      url: '/api/v2/music/search?q=周杰伦',
      method: "get",
      headers: {
        "Content-Type": "application/json;charset=utf-8"
      },
      withCredentials: true,
    });

可以成功返回数据

webjsjq commented 6 years ago

谢谢,我自己已经解决了,我设置代理的那块代码位置放的不对,要放在express处理路由前