http-proxy-middleware实现跨域；还有直接使用proxy跨域，不通过中间件

梦里梦外; 2022-11-20 02:57 289阅读 0赞

一、http-proxy-middleware实现跨域

1、若你想要跨域的网址，能够在当前电脑通过链接访问，那么可以直接在本地新建如下这个文件夹。若你想要跨域的网址，不能够在当前电脑通过链接访问，那么需要在那个新建链接接口的电脑端新建如下这个文件夹

2、新建文件夹，文件夹名字可以任意命名，然后在文件夹内新建一个js文件，文件名字可以任意

文件例如新建为setupProxy.js

3、然后在文件夹目录下执行如下代码，安装包

npm install express
    npm install http-proxy-middleware

4、在文件目录下执行

npm init -y

node setupProxy.js

通过node将后台跑起来

5、然后在前端网页内获取

在我的前端项目文件夹内，有一个页面需要执行跨域请求（注意：这个前端代码文件夹和上面的包含setupProxy.js的文件夹不是同一个）

import './App.css';
    import React , { Component } from 'react'
    class App extends Component{
      componentDidMount(){
        //get请求
        fetch("http://localhost:3000/api/index/queryPictureList")//这里是node运行的IP地址
          .then(res => res.json())
          .then(res => {
            console.log(res)
          })
      }
      //post请求需要加上一些参数
      // fetch('http://192.168.8.112:3000/api',{method:'post',body:...})
      //       .then(res => res.json())
      //       .then(res => {
      //         console.log(res)
      //       })
      //   }
      render() {
        return (
          <div className="App">
            123
          </div>
        );
      }
    }
    
    export default App;

二、直接使用proxy跨域，不通过中间件

在package.json下配置，具体如下

"proxy": "http://api.xxxx.com"

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]

这个地址是npm start启动时候，显示在页面的地址，也就是我们打开该项目的地址

[https://blog.csdn.net/jason\_renyu/article/details/104640965][https_blog.csdn.net_jason_renyu_article_details_104640965]

[https://www.cnblogs.com/crazycode2/p/9757236.html][https_www.cnblogs.com_crazycode2_p_9757236.html]

*  umi创建的项目，直接自带proxy.js文件，可以跟上需要跨域的地址就行

export default {
      dev: {
        '/permission/': {
          target: 'http://localdev:9050/',
          changeOrigin: true,
          pathRewrite: {
            '^': '',
          },
        },
        '/media/': {
          target: 'http://localdev:9050/',
          changeOrigin: true,
          pathRewrite: {
            '^': '',
          },
        },
      },
     test: {
        '/api/': {
          target: 'https://preview.pro.ant.design',
          changeOrigin: true,
          pathRewrite: {
            '^': '',
          },
        },
      },
    };

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: /images/20221120/f1cf48266d18425cacc135cc3f802ecd.png
[https_blog.csdn.net_jason_renyu_article_details_104640965]: https://blog.csdn.net/jason_renyu/article/details/104640965
[https_www.cnblogs.com_crazycode2_p_9757236.html]: https://www.cnblogs.com/crazycode2/p/9757236.html