[英]React Proxy not working http-proxy-middleware
我在我的 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);
});
}
我还尝试在.get 中使用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)
我遇到了问题,我在开发环境(本地主机)中,所以我的客户端和服务器来源不同......
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");
});
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);
});
您可以在后端进行 CORS 控制。 在这个问题之前, http-proxy-middleware 代理在 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() {
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.