安装跨域的插件
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>