Next.js 配置接口跨域代理转发 - Powered by Discuz! Archiver

首页 › Next.js论坛 › Next.js 配置接口跨域代理转发

小飓风 發表於 2020-1-14 20:03:00

Next.js 配置接口跨域代理转发

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
                     <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0)"></path>
               </svg>
                                       <p>使用 create-next-app 创建的 Next.js 项目配置接口跨域代理转发需要用到 custom server 功能。<br>
先安装好 express 和 http-proxy-middleware</p>
<pre><code>yarn add express http-proxy-middleware
</code></pre>
<p>在项目根目录下新建 server.js 文件，写入以下代码</p>
<pre><code class="prism language-js"><span class="token comment">// server.js</span>
<span class="token keyword">const</span> express <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'express'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> next <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'next'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> proxyMiddleware <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'http-proxy-middleware'</span><span class="token punctuation">)</span>

<span class="token keyword">const</span> devProxy <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token string">'/api'</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
   target<span class="token punctuation">:</span> <span class="token string">'http://localhost:8000'</span><span class="token punctuation">,</span> <span class="token comment">// 端口自己配置合适的</span>
   pathRewrite<span class="token punctuation">:</span> <span class="token punctuation">{</span>
         <span class="token string">'^/api'</span><span class="token punctuation">:</span> <span class="token string">'/'</span>
   <span class="token punctuation">}</span><span class="token punctuation">,</span>
   changeOrigin<span class="token punctuation">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> port <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">PORT</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token number">3000</span>
<span class="token keyword">const</span> dev <span class="token operator">=</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">!==</span> <span class="token string">'production'</span>
<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
dev
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> handle <span class="token operator">=</span> app<span class="token punctuation">.</span><span class="token function">getRequestHandler</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

app<span class="token punctuation">.</span><span class="token function">prepare</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
   <span class="token keyword">const</span> server <span class="token operator">=</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

   <span class="token keyword">if</span> <span class="token punctuation">(</span>dev <span class="token operator">&&</span> devProxy<span class="token punctuation">)</span> <span class="token punctuation">{</span>
         Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>devProxy<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            server<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token function">proxyMiddleware</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> devProxy<span class="token punctuation">[</span>context<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
         <span class="token punctuation">}</span><span class="token punctuation">)</span>
   <span class="token punctuation">}</span>

   server<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token string">'*'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>req<span class="token punctuation">,</span> res<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
         <span class="token function">handle</span><span class="token punctuation">(</span>req<span class="token punctuation">,</span> res<span class="token punctuation">)</span>
   <span class="token punctuation">}</span><span class="token punctuation">)</span>

   server<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span>port<span class="token punctuation">,</span> err <span class="token operator">=></span> <span class="token punctuation">{</span>
         <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">throw</span> err
         <span class="token punctuation">}</span>
         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`> Ready on http://localhost:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>port<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">)</span>
   <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token keyword">catch</span><span class="token punctuation">(</span>err <span class="token operator">=></span> <span class="token punctuation">{</span>
   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'An error occurred, unable to start the server'</span><span class="token punctuation">)</span>
   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre>
<p>相应地修改 package.json</p>
<pre><code>"scripts": {
   "dev": "node server.js",
   "build": "next build",
   "start": "NODE_ENV=production node server.js"
},
</code></pre>
<p>如下，所有接口以 <code>/api</code> 开头即可。</p>
<pre><code class="prism language-js"><span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> axios<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/api/users/'</span><span class="token punctuation">,</span> options<span class="token punctuation">)</span>
</code></pre>



</div>
<div id="MySignature" role="contentinfo">
博客已迁移到 blog.pythonking.top，如果地址失效或者有其他问题请到 github.com/DongchengWang/my-blog<br><br>
来源：https://www.cnblogs.com/stardust233/p/12193833.html

頁: [1]

查看完整版本: Next.js 配置接口跨域代理转发