【REACT-反向代理（处理跨域问题）】

历目

已于 2023-01-25 17:56:53 修改

阅读量318

点赞数

分类专栏： REACT 文章标签： react.js javascript 前端

于 2023-01-25 17:29:56 首次发布

本文链接：https://blog.csdn.net/limuzhixing/article/details/128761602

版权

REACT 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

官网Proxying API Requests in Development

1. 安装

高版本的react项目已经内置安装，无需重复安装

npm install http-proxy-middleware --save

2. 在src目录下创建setupProxy.js文件

3. 编写setupProxy.js代码

每次编写完setupProxy.js文件后都要npm start重启服务器

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

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'https://i.maoyan.com',
      changeOrigin: true,
    })
  );
  //可配置多个代理
  // app.use(
  //   '/ajax',
  //   createProxyMiddleware({
  //     target: 'https://baa.com',
  //     changeOrigin: true,
  //   })
  // );
};

4. 发送请求

import React, { Component } from 'react'
import axios from 'axios'

export default class CommingSoon extends Component {
  componentDidMount() {
    axios.get("/api/mmdb/movie/v3/list/hot.json?ct=%E6%AD%A6%E6%B1%89&ci=57&channelId=4").then(res => {
      console.log(res)
    })
  }
  render() {
    return (
      <div>
        CommingSoon
      </div>
    )
  }
}