react配置跨域，用nginx反向代理方式，nginx没有转发请求

Question

开发环境：
前端react: localhost:3000
后端restful api：192.168.33.3:8080

浏览器可以正常访问后端restful api：

react使用axios访问后端api：

    function fetchArticleList() {
        axios.get('/api/articles').then((response) => {
            return response.data;
        }).catch(function (error) {
            //...
        }).then(function () {
            //...
        });

    }

localhost机器上安装nginx，配置如下：

    server {
        listen       3000;
        server_name  localhost;


        location /api { 
            proxy_pass  http://192.168.33.3:8080/;    
        }  

        location /= {
            root html;
            index  index.htm  index.html;
        }

        location ~ \.(htm|html|js|css|jpg|png|gif|eot|svg|ttf|woff|woff2)$ {  
            root    html;     
        }    
                
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

问题：
在浏览器中访问localhost:3000/api/articles，出现如下错误：

是哪里没有配置正确？

Answer 1

你的react用什么启动的？没配合webpack，所以要用Nginx？

端口占用了，让其中一个换一个不就好了么？比如启动react的服务端口换成3001

Answer 2

Nginx是作为web服务器的，你在用crate-react-app启动的时候或者webpack，是使用node的web服务器，这两者肯定会发生冲突。代理，建议采用webpack-dev-server的proxy，具体使用可以百度，不需要额外借助Nginx。

Answer 3

首先应该明白一个问题,在比如vue或者react项目开发完成之后,不是把代码丢在服务器上面npm run start.应该是通过npm run build先把代码进行build,然后你就会发现多了一个build的文件夹,文件夹里面就是我们需要放在服务器上面的代码,把这个压缩过后的文件夹拖到服务器上面,假如你用nginx的话,那么就只需要配置静态文件就行,然后其他的配置和你一样,当然你哪里配置文件哪里/api后面还需要有一个/.
这是开发上线的步骤,如果你需要在本地开发的时候也去访问服务器资源,你只需要在package.json文件夹里面添加:

"proxy": "192.168.33.3:8080" // 你的后台接口地址

Answer 4

server {
        listen       3000;
        server_name  localhost;

        // /api后面少了一个/  试一下吧
        location /api/ { 
            proxy_pass  http://192.168.33.3:8080/;    
        }  

        location /= {
            root html;
            index  index.htm  index.html;
        }

        location ~ \.(htm|html|js|css|jpg|png|gif|eot|svg|ttf|woff|woff2)$ {  
            root    html;     
        }    
                
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

Answer 5

题主解决了么？我的现在也是同样的问题，配置了请求转发还是报404，postman可以请求到