您现在的位置是：网站首页> 编程资料编程资料

React反向代理及样式独立详解_React_

2023-05-24 363人已围观

简介 React反向代理及样式独立详解_React_

一、反响代理

1.1 安装

使用命令：npm install http-proxy-middleware --save

1.2 使用

将之前的Film.js组件改成如下：

import React from 'react' import {Route, Redirect, Switch, NavLink} from 'react-router-dom' import NowPlay from './film/NowPlay' import Comingsoon from './film/Comingsoon' export default function Film() { return ( Film
正在热映
即将上映
 ) }

在src文件夹下新建一个setupProxy.js注意名称一定是这个。

写入如下代码：

const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/gateway', createProxyMiddleware({ target: 'https://m.maizuo.com', changeOrigin: true, }) ); };

在Comingsoon.js组件中写入如下代码：

import axios from 'axios' import React, { Component } from 'react' export default class Comingsoon extends Component { componentDidMount() { axios.get("/gateway?cityId=110100&pageNum=1&pageSize=10&type=2&k=3607029").then((res) => { console.log(res) }, (err) => { console.log(err) }) } render() { return ( Comingsoon
 ) } }

这样我们在开发时的代理就配置好了。