React Proxy不工作http代理中间件

Question

我的react应用程序中有很多CORS问题，我研究了很多，发现我必须使用代理。

我尝试在package.json中添加来使用代理

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

然后我尝试删除上面的内容并创建具有以下内容的setupProxy.js：

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

我的请求在app.js中是这样的，当点击一个按钮时就会发生这种情况：

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);
});
}

我也尝试过使用https://api.clashroyale.com/v1/players/#123TAG在。得到但也没有运气。任何关于如何解决这个问题的提示都将是惊人的

使用时从服务器得到的响应https://api.clashroyale.com/v1/players/#123TAG按获取请求

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.

当我使用v1/players/#123TAG时得到的响应是

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

Answer 1

您可以在后端进行CORS控制。在此之前，http代理中间件代理在React js和Spring Boot项目中不起作用。GET API返回415状态错误(也许你也可以帮助我：((我也阻止了这个问题。我就这样解决了；

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() {
}
}