配置本地代理转发,解决跨域问题

第一步:安装http-proxy-middleware
$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware
第二步:创建`src/setupProxy.js`,配置内容如下
const proxy = require("http-proxy-middleware");

module.exports = function (app) {
    app.use(proxy("/apps/analysis/**", {
        target: "http://10.154.2.119:9000/",
        changeOrigin: true
    }));
    app.use(proxy("/apps/access/**", {
        target: "http://10.154.2.119:9000/",
        changeOrigin: true
    }));
    app.use(proxy("/apps_laravel/yq/analysis/**", {
        target: "http://10.154.2.119:9000/",
        changeOrigin: true
    }));
};
请求接口的基地址如下:
let baseUrl = '/apps/analysis/';
let baseAccessUrl = '/apps/access/';
let lavarelBaseUrl = '/apps_laravel/yq/analysis/';
let baseStaticUrl = 'http://localhost:3000/';
第三步:重新编译运行,出现Proxy created表示代理转发成功。
遇到的问题:
第三步没有成功,则手动配置
1.在config/paths.js添加

2. config/webpackDevServer.config.js中修改



如下是react项目自带的配置代理的说明:
### Configuring the Proxy Manually

> Note: this feature is available with `react-scripts@2.0.0` and higher.

If the `proxy` option is **not** flexible enough for you, you can get direct access to the Express app instance and hook up your own proxy middleware.

You can use this feature in conjunction with the `proxy` property in `package.json`, but it is recommended you consolidate all of your logic into `src/setupProxy.js`.

First, install `http-proxy-middleware` using npm or Yarn:

```bash
$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware
```

Next, create `src/setupProxy.js` and place the following contents in it:

```js
const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  // ...
};
```

You can now register proxies as you wish! Here's an example using the above `http-proxy-middleware`:

```js
const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(proxy('/api', { target: 'http://localhost:5000/' }));
};
```

> **Note:** You do not need to import this file anywhere. It is automatically registered when you start the development server.

> **Note:** This file only supports Node's JavaScript syntax. Be sure to only use supported language features (i.e. no support for Flow, ES Modules, etc).

> **Note:** Passing the path to the proxy function allows you to use globbing and/or pattern matching on the path, which is more flexible than the express route matching.
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用方向代理(Reverse Proxy)是一种常见的解决跨域问题的方法。下面是使用方向代理解决跨域问题的一般步骤: 1. 配置代理服务器:首先,你需要在你的服务器上设置一个代理服务器,用来转发客户端请求并获取目标服务器的响应。你可以使用常见的Web服务器软件,如Nginx或Apache来实现代理服务器。 2. 配置代理规则:在代理服务器上,你需要配置代理规则,指定哪些请求需要被转发到目标服务器。通常,你可以使用正则表达式或通配符来匹配请求的URL。 3. 设置响应头:为了解决跨域问题,你需要在代理服务器上设置正确的响应头。主要是设置"Access-Control-Allow-Origin"、"Access-Control-Allow-Methods"、"Access-Control-Allow-Headers"等跨域相关的头部信息,允许客户端跨域访问目标服务器。 4. 配置DNS解析:为了让客户端请求能够正确地被代理服务器转发,你需要将目标服务器的域名解析到代理服务器的IP地址。这可以通过修改本地hosts文件或者在DNS服务器上配置来实现。 5. 配置客户端请求:最后,在客户端代码中,你需要将请求发送到代理服务器的地址,而不是直接发送到目标服务器。这样代理服务器会将请求转发到目标服务器,并将响应返回给客户端。 需要注意的是,使用方向代理解决跨域问题需要你有一定的服务器运维和网络知识,并且需要对你的服务器进行相应的配置。另外,使用方向代理可能会引入一定的性能损耗,所以在实际应用中需要综合考虑。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值