How to configure cross-domain access to back-end restful api? with nginx in react front end

the development machine is a centos virtual machine installed in windows,windows as a restful api server, and the api server can be accessed normally in the browser:

http://192.168.33.3:8080/articles

// 20181229004601
// http://192.168.33.3:8080/articles

{
  "code": 0,
  "message": "OK",
  "data": {
    "article_list": [
      {
        "id": 15,
         "title": "hello15",
        "content": "hello world15",
        
      },
      //...
      ]
}

the front end uses react-create-app scaffolding to access loacalhost:3000, normally. In react, you can use axios to access the back-end api server. Cross-domain settings are needed. Two ways have been tried:

Type 1: add the following code to package.json in react-create-app

"proxy": "http://192.168.33.3:8080"

the following error occurs in the chrome console in this way:

GET http://192.168.33.3/articles?limit=10&offset=5 net::ERR_CONNECTION_REFUSED

Type 2: use nginx reverse proxy
1, install nginx, on windows and use localhost:80 to access it normally, add a reverse proxy server in the conf/nginx.conf file, and start nginx:

//D:\workspace\nginx\conf\nginx.conf
    server {
        listen       3000;
        server_name  localhost;

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

2. Use npm start to start react-create-app scaffolding, and it will be said that port 3000 is occupied.

question:
so, how should I set up a reverse proxy when using nginx?

Mar.23,2022

nginx cross-domain configuration


first of all, you need to understand what a proxy and a reverse proxy are:

forward proxy: you want to access A, but you actually access A through B

reverse proxy: you want to visit A, but actually A/xx.img exists on C, so you visit BMagne B to help you get something else from C / xx.img, from A.

A here is your react service, and A Murray 1 is your restful api,B is nginx.

so you probably need the following configuration:

server {
        listen       3001; -sharp 
        server_name  localhost;

        location / { -sharp react
            proxy_pass http://192.168.33.3:3000/;
        }

        location /article { -sharp restful api
            proxy_pass http://192.168.33.3:8000/;
        }
    }

then, you need to remove the prefix " http://192.168.33.3:8000/ "in your react project and send the" / articles?xxx "request directly using the relative path.

PS: recommends using uniform rules for backend requests, such as a uniform prefix (/ api), which is easier to judge and forward.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3e8ab-2b164.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3e8ab-2b164.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?