error: Localhost page denies access or When specified, “proxy“ in package.json must be a string. Instead, the type

React sets cross-domain proxy

Create a new setProxy.js file under the src folder

setProxy.js：

const {
    
     createProxyMiddleware } = require('http-proxy-middleware')

module.exports= function (app) {
    
    
    app.use(
        createProxyMiddleware(
            "/api",
            {
    
    
                target: "http://127.0.0.1:8080",
                changeOrigin: true,
                ws: true,
                pathRewrite:{
    
    
                    "^/api":"",
                },
            }
        )
    )
}

Also remember to install the http-proxy-middleware module:

npm install http-proxy-middleware

After the react project is started, the reason why the Localhost page refuses to access

The Localhost page refuses to access, mostly because setupProxy made an error when setting up a cross-domain proxy, as long as the wording is correct, there will be no error. Higher version import method:

const {
    
     createProxyMiddleware } = require('http-proxy-middleware')

Also pay special attention to the writing of the following line of function:

module.exports= function (app) {
    
    ...}

React项目运行出现错误：When specified, “proxy” in package.json must be a string.Instead, the type of “proxy” was “object”.Either remove “proxy” from package.json, or make it a string.

reason

If you're just using plain strings in your proxy, you don't need any additional configuration. However, when you use objects, you are using advanced configuration. This error is due to adding directly in package.json when configuring the proxy:

"proxy": {
    
    
    "/auth/google": {
    
    
        "target": "http://localhost:5000"
    }
}

Therefore, the solution steps are as follows:

1. Install http-proxy-middleware:npm i --save http-proxy-middleware

2. Remove code from package.json:

   "proxy": {
         
         
       "/auth/google": {
         
         
           "target": "http://localhost:5000"
       }
   }
   

3. Create an installation file for the agent. In the client's src folder, create the file setupProxy.js, and enter the following code:

   const proxy = require('http-proxy-middleware');
   module.exports = function(app) {
         
         
       app.use(proxy('/auth/google', 
           {
         
          target: 'http://localhost:5000/' }
       ));
   }
   

4. The above code may cause an error: the Localhost page is denied access. This is because the version of the import method is too low, and the import method of the high version:

   const {
         
          createProxyMiddleware } = require('http-proxy-middleware')
   

5. full code

   const {
         
          createProxyMiddleware } = require('http-proxy-middleware')
   
   module.exports= function (app) {
         
         
      app.use(
          createProxyMiddleware(
              "/api",
              {
         
         
                  target: "http://127.0.0.1:8080",
                  changeOrigin: true,
                  ws: true,
                  pathRewrite:{
         
         
                      "^/api":"",
                  },
              }
          )
      )
   }