反应代理不工作 http-proxy-middleware

Question

I was having a ton of issues with CORS in my react app and researched a lot and found out I had to use a proxy.

I tried using a proxy in package.json by adding

"proxy": "https://api.clashroyale.com/",

Then I tried deleting the above and creating setupProxy.js with the following content:

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

module.exports = function(app) {
  app.use(
    '/v1/players',
    createProxyMiddleware({
      target: 'https://api.clashroyale.com/',
      changeOrigin: true,
    })
  );
};

And my request looks like this in app.js and this happens when a button is clicked:

const clicksearch = () => {
        const headers = {
            "Authorization": "Bearer token",
            "Content-Type": "application/json",
        }
        axios.get("v1/players/#123TAG", {headers})
            .then(response => {
                console.log(response.data);
            })
            .catch((error) => {
                console.log('error ' + error);
            });
}

I also tried using https://api.clashroyale.com/v1/players/#123TAG in the.get but also no luck. Any hints on how to fix this would be amazing

The response I get from the server when using https://api.clashroyale.com/v1/players/#123TAG as get request

Access to XMLHttpRequest at
 'https://api.clashroyale.com/v1/players/%232Y900L99' from origin 
'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

And the response I get when using v1/players/#123TAG is

GET http://localhost:3000/v1/players/%232Y900L99 403 (Forbidden)

Answer 1

I had the issue and I was in a dev environment (localhost) so my client and server origins where different...

• so finally I overcame the problem by writing a simple custom proxy server that runs on localhost, (because I didn't had access to the server code, and I needed to allow cors from the responding origin)

Simple proxy server that runs on localhost:3001:

const express = require("express");
const cors = require("cors");
const axios = require("axios");
const bodyParser = require("body-parser");

const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
const corsOptions = {
  origin: ["http://localhost:3000"],
  credentials: true,
};
app.use(cors());

const targetAPI = "https://...apiAddress...";


app.post("*", (req, res) => {
  axios
    .post(targetAPI + req.url, req.body, {
      withCredentials: true,
      SameSite: "none",
    })
    .then((response) => {
      console.log("sent through proxy");
      if (response.status === 200) {
        res.cookie(response.headers["set-cookie"]);
        res.send(response.data);
      }
    })
    .catch((err) => {
      console.log("Error making the request from proxy");
      res.send(err);
    });
});

app.listen(3001, () => {
  console.log("cors proxy is listening on port 3001");
});

• note that my react app is running on port 3000 and my proxy server is on port 3001
• because we're using credentials in our request we need to also set origin to our app's origin to our white list, otherwise cors sets "Access-Control-Allow-Origin" to "*" which causes in-browser security error.

---

react sample login post request through my proxy:

      axios.post("http://localhost:3001/Login", dataToPost, { withCredentials: 
true })
      .then((res) => {
        if (res.status === 200) {
          //all cookies are set in you're browser
          console.log(res);
        }
      })
      .catch((err) => {
        console.log(err);
      });

Answer 2

You can do CORS control in backend. Before that problem http-proxy-middleware proxy is not working in React js and Spring Boot project. GET API is return 415 status error (Maybe you can help me too:) ) I was blocking that problem too. I solved like that;

import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;

@Component
public class SimpleCORSFilter implements Filter {

    private final Logger log = LoggerFactory.getLogger(SimpleCORSFilter.class);

    public SimpleCORSFilter() {
        log.info("SimpleCORSFilter init");
    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {

        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;

        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, remember-me");

        chain.doFilter(req, res);
    }

    @Override
    public void init(FilterConfig filterConfig) {
    }

    @Override
    public void destroy() {
    }

}