zoukankan      html  css  js  c++  java
  • React中如何设置代理跨域请求数据

    方案一:

    //配置: package.json
    
    "proxy":"https://xxxx.com"
    问题: 只能代理一个服务器

    方案二:

    利用客户端代理中间件(http-proxy-middleware)完成,官网给了新的使用方式,在src下新建文件setupProxy.js加下面代码,无需单独应用,webpack会自动引入文件。

    npm install http-proxy-middleware -S
    文件内容//verion < 1.0版本
    const proxy = require('http-proxy-middleware'); //需要安装中间件  
    module.exports = function(app) {
      app.use(
        proxy("/api", {
          target: 'https://xxx.com',
          changeOrigin: true
        })
      );
      app.use(
        proxy("/v2", {
          target: "https://xxx2.com",
          changeOrigin: true
        })
      );
    };
    
    //组件: /api/xx ... | /v2/...
    
    //verion > 1.0
    const { createProxyMiddleware } = require('http-proxy-middleware');
    
    module.exports = function(app) {
    
      app.use('/api', createProxyMiddleware({
        target: 'http://localhost:3000',
        changeOrigin: true,
      }));
    
      app.use('/api2', createProxyMiddleware({
        target: 'http://xxx.com',
        changeOrigin: true,
        pathRewrite: { //路径替换
          '^/api2': '/api', // axios 访问/api2 == target + /api
        }
      }));
    
    };

    方案三:

    配置create-react-app环境下的webpack,无需安装中间件,修改eject后的config目录下的webpackDevServer.js配置文件。

    // config/webpackDevServer.js
    
    proxy: {
      '/api2': {
        target: 'http://xxx.com', // 后台服务地址以及端口号
        ws: true, // websoket 服务
        changeOrigin: true, //是否跨域
        pathRewrite: { '^/api2': '/api' }
      }
    }
  • 相关阅读:
    python kivy 简单入门
    django 入门实例
    window docker安装
    apache进程和用户请求的关系
    php cookie工作原理
    react-router 简单的nginx配置
    node单线程支撑高并发原理(node异步I/O)
    知识图谱
    java
    java
  • 原文地址:https://www.cnblogs.com/samve/p/14232745.html
Copyright © 2011-2022 走看看