React学习笔记—反向代理跨域

一、反向代理的介绍

反向代理服务器位于用户与目标服务器之间,但是对于用户而言,反向代理服务器就相当于目标服务器,即用户直接访问反向代理服务器就可以获得目标服务器的资源。同时,用户不需要知道目标服务器的地址,也无须在用户端作任何设定。反向代理服务器通常可用来作为Web加速,即使用反向代理作为Web服务器的前置机来降低网络和服务器的负载,提高访问效率


二、React中反向代理的使用

1、前端跨域请求

componentDidMount() {
    Axios.get("/ajax/mostExpected?ci=10&limit=10&offset=0&token=&optimus_uuid=43388C403C4911EABDC9998C784A573A4F64A16AA5A34184BADE807E506D749E&optimus_risk_level=71&optimus_code=10").then(res=>{
        console.log(res.data)
    })
}

2、在项目目录下的 src 文件夹下新建 setupProxy.js文件,文件内容如下:

const proxy = require('http-proxy-middleware');// 不用下载,直接引入
module.exports = function(app) {
  app.use(
    '/ajax', 
    proxy({
      target: 'http://m.maoyan.com',
      changeOrigin: true,
      //pathRewrite:
    })
  );

  app.use(
    '/ajax2',
    proxy({
      target: 'http://m2.maoyan.com',
      changeOrigin: true,
      //pathRewrite:
    })
  );
};

3、设置完成之后就可以正常的请求接口数据了


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 848130454@qq.com

文章标题:React学习笔记—反向代理跨域

文章字数:376

本文作者:Spicy boy

发布时间:2020-05-02, 12:59:10

最后更新:2021-03-08, 17:29:43

原始链接:http://www.spicyboy.cn/2020/05/02/React%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E2%80%94%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%86/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏