官网:[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都是公用的,
所以为了解决这个问题,改成模块化
这样他就能保证样式名不重复
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
这样就能实现样式自由!!!
