브라우저가 HTML, CSS 등 프런트엔드 서버에 정적 리소스를 요청합니다.
그런 다음 브라우저는 api 서버에 ajax 요청을 하여 크로스 도메인 문제를 일으킵니다.
현재 제가 생각하고 있는 해결방안
은 프론트엔드 리소스와 백엔드 리소스를 모두 동일한 도메인 이름으로 두는 것인데 별로 합리적이지 않다고 느껴집니다.
두 번째는 역방향 프록시를 사용하는 방법인데 아직 사용해본 적이 없고 적합한지도 모르겠습니다.
백엔드를 통해 이 문제를 어떻게 해결할 수 있나요?
브라우저가 HTML, CSS 등 프런트엔드 서버에 정적 리소스를 요청합니다.
그런 다음 브라우저가 api 서버에 ajax 요청을 하여 크로스 도메인 문제가 발생합니다.
현재 제가 생각하고 있는 해결방안
은 프론트엔드 리소스와 백엔드 리소스를 모두 동일한 도메인 이름으로 두는 것인데 별로 합리적이지 않다고 느껴집니다.
두 번째는 역방향 프록시를 사용하는 방법인데 아직 사용해본 적이 없고 적합한지도 모르겠습니다.
백엔드를 통해 이 문제를 어떻게 해결할 수 있나요?
기본적으로 다음과 같은 크로스 도메인 솔루션이 있습니다
JSONP
코르스
창.이름
document.domain
5.location.hash
6.window.postMessage()
자세한 내용은 다음 글을 참고해주세요 https://github.com/rccoder/bl...
API 서버는 크로스 도메인 헤더만 설정하면 됩니다. 스프링으로 작성한다면 다음과 비슷한 코드를 사용하면 됩니다
<code>@Component public class CorsFilter implements Filter { @Override public void destroy() { } @Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response = (HttpServletResponse) res; HttpServletRequest request = (HttpServletRequest) req; response.setHeader("Access-Control-Allow-Origin", "你的前端服务器地址"); response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE, HEAD, PATCH"); response.setHeader("Access-Control-Max-Age", "3600"); response.setHeader("Access-Control-Allow-Headers", "X-Requested-With, X-Auth-Token, Content-Type"); response.setHeader("Access-Control-Expose-Headers", "X-Requested-With, X-Auth-Token, Content-Type, X-TOTAL-COUNT"); response.setHeader("Access-Control-Allow-Credentials", "true"); if (!"OPTIONS".equalsIgnoreCase(request.getMethod())) { chain.doFilter(req, res); } } @Override public void init(FilterConfig config) throws ServletException { } }</code>
예를 들어 P와 API라는 두 가지 프로젝트가 있습니다
그러면 호출 방법은 비슷합니다: P 프론트 엔드 -》P 백 엔드 -》API
주제의 백엔드가 Nodejs인 경우 다음 코드를 사용하여 크로스 도메인을 구현할 수 있습니다. Express인 경우 미들웨어로 패키징하는 것이 좋습니다
<code>res.setHeader('Access-Control-Allow-Origin', req.headers.origin); res.setHeader('Access-Control-Allow-Credentials', true); res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS'); res.setHeader('Access-Control-Allow-Headers','x-requested-with,content-type');</code>
가장 좋은 대답은 이미 있습니다. 쿠키 가져오기를 요청할 때 withCredentials: true를 사용하는 것을 잊지 마세요
jsonp 참조 가능
Access-Control-Allow-Origin: 프런트엔드 도메인 이름
개인적으로는 역방향 프록시를 사용하는 것이 가장 안정적이라고 생각합니다
역방향 프록시에는 nginx를 사용하는 것이 더 편리할 수 있지만 도메인 간 응답 헤더 설정은 IE와 완전히 호환되지 않습니다
역방향 프록시는 비교적 간단합니다
노드가 작성한 백엔드 코드가 express/koa를 사용한다면 백엔드 코드에 cors() 미들웨어를 직접 도입할 수 있습니다
역방향 프록시로 nginx를 사용하는 것이 더 편리합니다
API 서버에 js 파일을 넣고 프런트 엔드에서 참조하면 외부 통계 호출 논리와 마찬가지로 도메인 간 문제가 발생하지 않습니다.