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

 

正在热映

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

设置css样式
.film ul li