当我们做前后端分离项目的时候,有时候前结合后端做调试的时候,就面临前端要跨域访问后端的情况,直接从前端跨域访问后端是需要在后端中做接受前端IP地址发出请求的接受处理,这句话很拗口,简单讲就是你要在后端设置一把前端所在服务器IP能够开你后端大门的钥匙,至于这个钥匙所做的处理是什么呢?是往请求消息头中加Access-Control-Allow-Origin ,Access-Control-Allow-Origin是HTML5 添加的新功能,设置这个属性值为你前端所在服务器的ip地址。废话不多说,下面直接展示例子:
- package com.yiyong.mavenspring.project.filters;
-
- 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.HttpServlet;
- import javax.servlet.http.HttpServletResponse;
-
- import org.springframework.beans.factory.annotation.Value;
-
-
-
-
-
-
-
-
-
- public class AccessFilter extends HttpServlet implements Filter{
-
-
-
-
- private static final long serialVersionUID = 1L;
-
- @Value("${yiyong.mavenspring.project.allow.url}")
- private String projectDemoAllowOriginUrl;
-
- @Override
- public void init(FilterConfig filterConfig) throws ServletException {
- }
-
-
- @Override
- public void doFilter(ServletRequest request, ServletResponse response,
- FilterChain chain) throws IOException, ServletException {
-
- HttpServletResponse httpResponse = (HttpServletResponse) response;
- httpResponse.setHeader("Access-Control-Allow-Origin", projectDemoAllowOriginUrl);
- httpResponse.setHeader("Access-Control-Allow-Headers","Origin, X-Requested-With, Content-Type, Accept");
- httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
- chain.doFilter(request, httpResponse);
-
- }
-
- }
这是一个过滤器,就是在过滤器中加入Header的基本信息,我这边的IP地址是利用spring的注解方式赋值,当然我们不多说这个,接下去我们就展示前端怎么进行ajax跨域调用
大家可以结合这个例子做个尝试。希望都可以实现ajax前端跨域访问后端,轻松做到前后端分离。