React 项目启动之反向代理

1. npm install http-proxy-middleware --save

2. 创建 src > setupProxy.js ()

//加载此模块
const { createProxyMiddleware } = require('http-proxy-middleware');

//每次请求/api,就代理到localhost:3000取数据
module.exports = function (app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:3000',
      changeOrigin: true,
    })
  );
  app.use(
    '/ajax',
    createProxyMiddleware({
      target: 'https://i.maoyan.com',
      changeOrigin: true,
    })
  );
};

3. src > App.js

import React from 'react'
import './App.css'
import axios from 'axios'

function App() {
  React.useEffect(() => {
    //用猫眼接口测试,本地同理
    axios.get('/ajax/filterCinemas?ci=59&optimus_uuid=AB69E6E053F511EC8181334F641EF3846CE64D1941F744AD8D1CFD930ED4C6C1&optimus_risk_level=71&optimus_code=10').then(res => {
      console.log(res);
    })
  }, [])

  return 
  <div>
    app
  </div>
}

export default App;

上一篇:vue打包以后,外部文件修改ip地址


下一篇:axios请求封装