React 使用 Proxy 代理（create-react-app）
<h2 id="在create-react-app-中配置proxy代理">在create-react-app 中配置proxy代理</h2><p>proxy，默认为NULL，类型为URL，一个为了发送http请求的代理<br>
在平时开发时，尤其前后端分离时，需要假数据来进行模拟请求，这个时候就需要<code>proxy</code>代理来处理</p>
<h3 id="create-react-app--20">create-react-app < 2.0</h3>
<p>package.json 中配置</p>
<pre><code class="language-js">"proxy":{
"/api/**":{
"target":"https://easymock.spiritling.pub/",
"changeOrigin": true
}
}
</code></pre>
<h3 id="create-react-app--20-1">create-react-app > 2.0</h3>
<h4 id="packagejson-中配置不推荐">package.json 中配置（不推荐）</h4>
<pre><code class="language-js">"proxy": "https://easymock.spiritling.pub/",
</code></pre>
<h4 id="配置文件-srcsetupproxyjs-推荐">配置文件 <code>/src/setupProxy.js</code> （推荐）</h4>
<p>将 <code>create-react-app</code> 解包后，可以在 <code>config</code> 文件夹下找到配置</p>
<p>在 <code>config/path.js</code> 中存在 <code>proxySetup: resolveApp('src/setupProxy.js'),</code></p>
<p>而 <code>proxySetup</code> 是只在 <code>webpackDevServer.config.js</code> 文件中使用，也就是说只在开发时使用</p>
<p>所以，可以在 /src/setupProxy.js 中配置</p>
<p>首先安装 <code>http-proxy-middleware</code></p>
<pre><code class="language-bash">npm install http-proxy-middleware -D
</code></pre>
<p>然后文件配置</p>
<pre><code class="language-js">const proxy = require('http-proxy-middleware');
module.exports = function (app) {
app.use(
'/api/v1/',
proxy({
target : 'https://easymock.spiritling.pub/',
changeOrigin : true,// 设置跨域请求
PathRewrite : {
'^/api/v1' : '' // 将/api/v1 变为 ''
}
})
);
};
</code></pre>
<h3 id="使用例子">使用例子</h3>
<h4 id="01">01</h4>
<pre><code class="language-js">const proxy = require('http-proxy-middleware');
module.exports = function (app) {
app.use(
'/api/v1/',
proxy({
target : 'https://easymock.spiritling.pub/',
changeOrigin : true
})
);
};
</code></pre>
<p>游览器中请求为 <code>https://example.com/api/v1/login</code></p>
<p>则经过代理后可以转为 <code>https://easymock.spiritling.pub/api/v1/login</code></p>
<h4 id="02">02</h4>
<pre><code class="language-js">const proxy = require('http-proxy-middleware');
module.exports = function (app) {
app.use(
'/api/v1/',
proxy({
target : 'https://easymock.spiritling.pub/',
changeOrigin : true,
PathRewrite : {
'^/api/v1' : ''
}
})
);
};
</code></pre>
<p>游览器中请求为 <code>https://example.com/api/v1/login</code></p>
<p>则经过代理后可以转为 <code>https://easymock.spiritling.pub/login</code></p>
<blockquote>
<p>create-react-app官方-Proxying API Requests in Development</p>
</blockquote>
<h2 id="http-proxy-middleware-新版本--100"><code>http-proxy-middleware</code> 新版本 ≧ 1.0.0</h2>
<p>在新版本大于等于 1.0.0 时使用会出现如下问题</p>
<pre><code>proxy is not a function
</code></pre>
<p>也就是说 <code>http-proxy-middleware</code> 或者 <code>setupProxy</code> 会出现报错 <code>proxy is not a function</code></p>
<p>所以需要使用新版本的写法才可以</p>
<pre><code class="language-js">const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
app.use(createProxyMiddleware('/api/v1', {
target : 'https://easymock.spiritling.pub',
changeOrigin : true,
ws: true,
pathRewrite : {
'^/api/v1' : ''
},
}));
};
</code></pre><br><br>
来源：https://www.cnblogs.com/spirit-ling/p/13327917.html
頁:
[1]