官网:[Proxying API Requests in Development | Create React App 中文文档 (bootcss.com)

npm i http-proxy-middleware //安装 

/** * 设置代理 */  const { 
         createProxyMiddleware } = require('http-proxy-middleware');   module.exports = function(app) { 
            app.use(      '/ajax',//以ajax开头      createProxyMiddleware({ 
                target: 'https://i.maoyan.com',        changeOrigin: true,      })    );  }; 

/** * 反向代理 */ import React, { 
         Component } from 'react'; import axios from 'axios'; export default class DaiLi extends Component{ 
           componentDidMount(){ 
               axios.get("/ajax/mostExpected?limit=10&offset=0&token=&optimus_uuid=46E0ACB0E7E111ECB8920FC22EFCA8A202A7733C10C4484FB57F69AF4A705A69&optimus_risk_level=71&optimus_code=10").then(res=>{ 
        
          console.log(res)
      })
  }
    render() { 
        
    return (
      <div>
        反向代理
      </div>
    );
  };
};

这样就实现反向代理了，没有跨域问题~

在不同组件中引入css但他们的css都是公用的, 所以为了解决这个问题,改成模块化

• 1.将文件名改为文件名.module.css
• 2.将module.css引入
• 3.通过引入名.样式名实现样式的模块化

这样他就能保证样式名不重复

css文件Films.module.css

.active{ 
        
    color: blueviolet;
}

import React from 'react';
import style from './css/Films.module.css'
function Films(){ 
        
    console.log(style);
    return (
        <div>
            Films
            <b className={ 
        style.active}>去404页(编程式导航)</b>
        </div>
    );
}

export default Films

这样就能实现样式自由!!! 大功告成!!!✌