react中的反向代理 (多用于跨域请求数据)与module.css

安装跨域的插件

npm http-proxy-middleware

在src目录下新建一个setupProxy.js 只能是这个名

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/ajax',  // /api/list /api/detail /api/center /api/cart
    createProxyMiddleware({
      target: 'https://i.maoyan.com',
      changeOrigin: true
    })
  );
};

 配置setupProxy.js

以https://i.maoyan.com/ajax/comingList?xxx路径为例

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/ajax',     以ajax路径为开始的   
    createProxyMiddleware({
      target: 'https://i.maoyan.com',
      changeOrigin: true
    })
  );
    app.use可以有多个  路径不同即可
app.use(
    '/ajax2',       
    createProxyMiddleware({
      target: 'https://i.maoyan.com',
      changeOrigin: true
    })
  );
};

 跨域应用 当有以ajax开头的请求时 将会自动补上‘https://i.maoyan.com’

        axios.get("/ajax/comingList?xx").then(res=>{

 module.css (防止相同className样式重叠)

创建css文件时 在中间加一个.module如下图所示

在引用css文件时不是

import  ‘./xx/xx.css’

 而是

import style from './xx/xx.css

 创建className

  <div to="/films/nowplaying"   ClassName={style.kerwinactive}>正在热映</div>

 当给标签选择器设置css时应给它添加一个父级标签 不然会导致与其他组件样式重叠

设置css样式
.film ul li

 <div className={style.film}>
      <ul>
           <li>
                    <div></div>
           </li>
      </ul>