blocks|key|2499008|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2499009|{
++"proxy":+{
++++"/api/foo":+{
++++++"target":+"your+url"+,
++++++"changeOrigin":+true
+++++},
++++"/api/bar":+{
++++++"target":+"another+url",
++++++"changeOrigin":+true
+++++},
+++}
}|code-block|syntax|javascript|2499010|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this:

<pre><code>{
 "proxy": {
 "/api/foo": {
 "target": "your url" ,
 "changeOrigin": true
 },
 "/api/bar": {
 "target": "another url",
 "changeOrigin": true
 },
 }
}
</code></pre>

blocks|key|4610853|text|在您的package.json中添加：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4610854|"proxy":+"http://localhost:3001",|code-block|syntax|javascript|4610855|请重新启动服务器(后端应用程序)和前端(创建React应用程序)|4610856|确保您的post请求使用axios，如下所示：|4610857|axios.post("/auth/register",+userData)
+++++.then(res+=>+console.log(res.data));|4610858|上面的这个例子来自我的环境，也很好用。请注意，代理只适用于开发模式。|4610859|确保您的代码在代理和axios+post中的url中都有正确的斜杠。|4610860|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

In your package.json add:

<pre><code>"proxy": "http://localhost:3001",
</code></pre>

Please restart both your server ( backend app ) and front-end ( Create React App )

Make sure that your post request with axios it's like below:

<pre><code>axios.post("/auth/register", userData)
 .then(res =&gt; console.log(res.data));
</code></pre>

This example above it's from my environment and works as well. Notice that proxy works only for development mode

Ensure your code that has the right slash in url in proxy and in axios post both

blocks|key|6026792|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6026793|这只是一个windows权限问题，即使它经常在mac上运行。|ordered-list-item|6026794|我只是在服务器端安装了-|6026795|全局添加http-|6026796|，现在它在客户端|6026797|上工作得很好。|6026798|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|-4|4|5|6|N|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|O|7|@]|8|@]|9|$]]|$1|D|3|E|4|C|6|P|7|@]|8|@]|9|$]]|$1|F|3|G|4|5|6|Q|7|@]|8|@]|9|$]]|$1|H|3|I|4|C|6|R|7|@]|8|@]|9|$]]|$1|J|3|K|4|5|6|S|7|@]|8|@]|9|$]]|$1|L|3|-4|4|5|6|T|7|@]|8|@]|9|$]]]|M|$]]

<ol>
<li>it is just a windows permission issue, even it works on mac frequently.</li>
<li>I just install - yarn global add http-server on server side, now it is working fine from the client side</li>
</ol>

blocks|key|6026899|text|尝试删除请求的绝对路径，并使用相对路径。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6026900|示例|offset|length|style|BOLD|6026901|axios.post("/api/auth/register",+userData)
+.then(res+=>+console.log(res.data));|code-block|syntax|javascript|6026902|注意:请勿使用http://localhost:3000/api/auth/register作为请求URI，它(React服务器)将自动代理请求，并且API请求将从3001端口提供服务。|CODE|6026903|entityMap^0|0|0|2|0|0|7|13|2A|4|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@$D|T|E|U|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|V|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|W|8|@$D|X|E|Y|F|O]|$D|Z|E|10|F|G]]|9|@]|A|$]]|$1|P|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|Q|$]]

Try to remove absolute path for request, and use relative path instead.

Example

<pre><code>axios.post("/api/auth/register", userData)
 .then(res =&gt; console.log(res.data));
</code></pre>

Note: Do not use <code>http://localhost:3000/api/auth/register</code> as the request URI, it (React server) will automatically proxying the request, and the API request will serve from 3001 port.

blocks|key|1866231|text|将您的代理配置替换为："+proxy+"："http://127.0.0.1:5000"，确保您的代理已添加到package.json的客户端，并在将代理配置移动到客户端后使用ctrl%2Bc进行硬重启。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1866232|entityMap|0|LINK|mutability|MUTABLE|url|http://127.0.0.1:5000/^0|M|L|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Replace your proxy config with this: "proxy": "<a href="http://127.0.0.1:5000" rel="nofollow noreferrer">http://127.0.0.1:5000</a>", 
Make sure your proxy is added in client side of package.json and do a hard restart using ctrl+c after moving proxy config to client side.

blocks|key|4611018|text|我知道这篇文章太老了，但我最近也遇到了同样的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4611019|修复这个问题的方法是使用npm包API+axios来发出请求，而不是使用原生的JavaScript+fetch+API。|offset|length|style|BOLD|4611020|我没有深入了解请求头axios与fetch的不同之处，但现在一切都很好。|4611021|entityMap^0|0|S|W|0|0|10|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@$D|Q|E|R|F|G]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|K|$]]

I know this post is old but I recently had the same issue.

What fixed it for me was using the npm package axios to make API requests instead of the native JavaScript fetch API.

I didn't look deep enough to see what request headers axios was doing differently than fetch, but everything works fine for me now.

blocks|key|1871573|text|问题在webpack配置文件中，使用您自己的初学者包只需在以下代码中设置webpack.dev.js即可|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1871574|module.exports+=+merge(common,+{
++mode:+'development',
++devServer:+{
++++host:+'localhost',
++++port:+3000,
++++open:+true,
++++historyApiFallback:+true,
++++proxy:+{
++++++'/api':+{
++++++++target:+'http://localhost:5000',
++++++++secure:+false
++++++}
++++}
++},
++devtool:+'inline-source-maps'
});+|code-block|syntax|javascript|1871575|并为您的服务器设置适当的localhost，然后重新启动dev-server。在"create-react-app“中，webpack的配置文件应该在/node_modules/react-scripts/config路径上，按照上面的代码进行更改，然后重新启动dev-server，这样就可以了。这条路径上有webpack.dev.js和webpack.prod.js。|1871576|entityMap^0|10|E|0|0|23|Y|4B|E|4Q|F|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|N|$]]

Issue is in webpack config file,with your own starter pack just set <code>webpack.dev.js</code> as in code bellow
<pre class="lang-js prettyprint-override"><code>module.exports = merge(common, {
 mode: 'development',
 devServer: {
 host: 'localhost',
 port: 3000,
 open: true,
 historyApiFallback: true,
 proxy: {
 '/api': {
 target: 'http://localhost:5000',
 secure: false
 }
 }
 },
 devtool: 'inline-source-maps'
}); 
</code></pre>
and set appropriate localhost for your server and restart dev-server. In &quot;create-react-app&quot; webpack config files should be on path
<code>/node_modules/react-scripts/config</code>
, make changes as in code above and restart dev-server and you should be fine. On this path are <code>webpack.dev.js</code> and <code>webpack.prod.js</code>.

blocks|key|6027027|text|我有这个问题，我做的一切都是“正确的”。对我来说，GET请求将发送到我的代理服务器，而不是POST！我收到请求中止错误。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6027028|意外地发现了解决方案，即我的data+:+{+key:+value}需要正确地引用为data+:+{+"key":+value+}。|offset|length|style|CODE|6027029|entityMap^0|0|E|K|16|N|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]|$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|I|$]]

I had this problem and I did everything "correct". For me GET requests were going to my proxy but not POST! I got Request Aborted error.

Discovered solution by accident that my <code>data : { key: value}</code> needed to be properly quoted as <code>data : { "key": value }</code>.

blocks|key|4611150|text|我从创建-反应-应用程序开始，然后添加了Node.js+Express服务器(在Mac上)。在阅读了许多解决方案，多次重新启动服务器后，我仍然在努力让它与代理一起工作，并能够获取(‘/api/hello’)。以下是对我实际有效的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4611151|更改webpack.config.js|4611152|devServer:+{
++++open:+true,
++++historyApiFallback:+true,
++++proxy:+{
++++++++++++'/api':+{
++++++++++++++++++++target:+'http://localhost:3001',
++++++++++++++++++++secure:+false
++++++++++++}
++++}
},|code-block|syntax|javascript|4611153|我重新启动了我的电脑(它显然对某些人有效)。后来我发现在webpack.config.js中定义了两次devServer+...|offset|length|style|CODE|4611154|entityMap^0|0|0|0|1F|9|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@$K|U|L|V|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

I started with create-react-app, then added Node.js Express server (on Mac OS).
After reading many solutions, restarting the server many times, I was still struggling to make it work with the proxy and be able to fetch('/api/hello').
Here is what actually works for me:
Changing webpack.config.js
<pre><code>devServer: {
 open: true,
 historyApiFallback: true,
 proxy: {
 '/api': {
 target: 'http://localhost:3001',
 secure: false
 }
 }
},
</code></pre>
I restarted my computer (it apparently worked for some people). I discovered later that <code>devServer</code> was defined twice in webpack.config.js...

blocks|key|4611188|text|我读到了使用fetch而不是axios可能导致问题的答案。不是真的，错误是不正确的请求/主体(你需要查看你的代码)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4611189|对于所有正在寻找答案的人，请注意，如果您通过creat-react-app创建应用程序，并且没有webpack.config.js，那么这是不同的解决方案。然后你需要做的就是将代理添加到你的package.json中|4611190|fetch请求应该是什么样子的：|4611191|+const+options+=++{
++method:+'POST',+//+*GET,+POST,+PUT,+DELETE,+etc.
++mode:+'cors',+//+no-cors,+cors,+*same-origin
++cache:+'no-cache',+//+*default,+no-cache,+reload,+force-cache,+only-if-cached
++credentials:+'include',+//+include,+*same-origin,+omit,+chosen+include+to+allowed+sending+cookies
++headers:+{
++++'Content-Type':+'application/json',
++++COOKIE:+'key=value;+Path=/;+Expires=Thu,+09+Jul+2020+07:20:21+GMT;+HttpOnly',
++},
++body:+JSON.stringify({+something+}),+//+body+data+type+must+match+"Content-Type"+header+in+this+case+it+is+json
})

+fetch(url,+options)
++++.then(res+=>+{
++++++//return+res.json!
++++++++return+res.json();+
++++})
++++.then(data+=>+{
++++++++//+do+something+with+data
++++})|code-block|syntax|javascript|4611192|为了更好地调试，从dev+tools中添加一个网络选项卡的printscreen|4611193|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|R|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I read the answer that problem can cause using fetch instead of axios.
Is not true, fault is incorrect request/body (you need look in your code).
For all who is looking for answers pleas be aware that is different solution if you create app by creat-react-app and don't have a webpack.config.js. Then enough what you need to set up is adding proxy to your package.json
How should look proper fetch request:
<pre><code> const options = {
 method: 'POST', // *GET, POST, PUT, DELETE, etc.
 mode: 'cors', // no-cors, cors, *same-origin
 cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
 credentials: 'include', // include, *same-origin, omit, chosen include to allowed sending cookies
 headers: {
 'Content-Type': 'application/json',
 COOKIE: 'key=value; Path=/; Expires=Thu, 09 Jul 2020 07:20:21 GMT; HttpOnly',
 },
 body: JSON.stringify({ something }), // body data type must match &quot;Content-Type&quot; header in this case it is json
})

 fetch(url, options)
 .then(res =&gt; {
 //return res.json!
 return res.json(); 
 })
 .then(data =&gt; {
 // do something with data
 })
</code></pre>
For better debugging is good add a printscreen of network tab from dev tools

blocks|key|6027125|text|开发环境的代理设置：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|6027126|package.json包含：|6027127|...
++"scripts":+{
++++"start":+"react-scripts+start",
++++"build":+"react-scripts+build",
++++"test":+"react-scripts+test",
++++"eject":+"react-scripts+eject"
++},
++"proxy":+"http://localhost:3001"
...|code-block|syntax|javascript|6027128|...
++axios({
++++++++method:+"post",
++++++++proxy:+{
++++++++++++host:+"localhost",
++++++++++++port:+3001
++++++++},
++++++++.
++++++++.
++++++++.
++++})
...|6027129|环境的代理设置：|6027130|在公用文件夹中创建一个serve.json文件，并插入以下任一properties|6027131|serve.json包含：|6027132|+{
++"redirects":+[
++++{+"source":+"/api",+"destination":+"http://localhost:3001/"+}
++]
+}|6027133|npm+install+-g+serve
serve+-s+build|6027134|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/vercel/serve-handler#options^0|0|2|0|0|0|0|0|V|A|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|19|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1A|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|1B|8|@]|D|@]|E|$K|L]]|$1|O|3|P|5|6|7|1C|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1D|8|@]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|S|3|T|5|6|7|1H|8|@]|D|@]|E|$]]|$1|U|3|V|5|J|7|1I|8|@]|D|@]|E|$K|L]]|$1|W|3|X|5|J|7|1J|8|@]|D|@]|E|$K|L]]|$1|Y|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|Z|$10|$5|11|12|13|E|$14|15]]]]

Proxy settings for the development environment:
package.json contains:
<pre><code>...
 &quot;scripts&quot;: {
 &quot;start&quot;: &quot;react-scripts start&quot;,
 &quot;build&quot;: &quot;react-scripts build&quot;,
 &quot;test&quot;: &quot;react-scripts test&quot;,
 &quot;eject&quot;: &quot;react-scripts eject&quot;
 },
 &quot;proxy&quot;: &quot;http://localhost:3001&quot;
...
</code></pre>
<pre><code>...
 axios({
 method: &quot;post&quot;,
 proxy: {
 host: &quot;localhost&quot;,
 port: 3001
 },
 .
 .
 .
 })
...
</code></pre>
Proxy settings for the <a href="https://create-react-app.dev/docs/deployment" rel="nofollow noreferrer">production</a> environment:
create a serve.json file in the public folder and insert any of these <a href="https://github.com/vercel/serve-handler#options" rel="nofollow noreferrer">properties</a>:
serve.json contains:
<pre><code> {
 &quot;redirects&quot;: [
 { &quot;source&quot;: &quot;/api&quot;, &quot;destination&quot;: &quot;http://localhost:3001/&quot; }
 ]
 }
</code></pre>
<pre><code>npm install -g serve
serve -s build
</code></pre>

blocks|key|2499450|text|从create-react-app.dev/docs查看：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2499451|2499452|开发服务器将仅尝试将其Accept标头中没有文本/html的请求发送到代理。|blockquote|2499453|2499454|2499455|因此，不会代理具有该标头任何请求，例如，响应于单击链接(锚定标记)而发送的GET请求。我建议首先在浏览器开发工具中查看请求头的"Accept“字段。|2499456|entityMap|0|LINK|mutability|MUTABLE|url|https://create-react-app.dev/docs/proxying-api-requests-in-development/^0|1|P|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|-4|5|6|7|X|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|Y|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|Z|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|10|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|11|8|@]|9|@]|C|$]]|$1|L|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|M|$N|$5|O|P|Q|C|$R|S]]]]

From <a href="https://create-react-app.dev/docs/proxying-api-requests-in-development/" rel="nofollow noreferrer">create-react-app.dev/docs</a> see:
<blockquote>
The development server will only attempt to send requests without
text/html in its Accept header to the proxy.
</blockquote>
So any request with that header, for example a GET request sent in response to a click on a link (anchor tag ) will not be proxied. I suggest starting by looking as the &quot;Accept&quot; field of the request header in the browser dev tools.

I use create-react-app to bootstrap my react app, I did this in my package.json 

<code>"proxy":"http://localhost:3001"</code> because my api server is running on 3001, but I fire request using axios, it still point to port 3000, any clue what is missing? restarted my app several times it still the same.

create-react-app doesn't work with proxy

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我使用create- react -app来引导我的react应用程序，我在我的package.json中做了这件事"proxy":"http://localhost:3001"，因为我的api服务器在3001上运行，但是我使用axios发出请求，它仍然指向端口3000，有什么线索吗？重新启动我的应用程序几次，它仍然是...

问create-react-app不能与代理一起使用
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问create-react-app不能与代理一起使用EN