ajax跨域解决办法

ajax跨域解决

问题来源

最近项目里面遇到一个问题,项目是前后端分离的,前端使用vue,后端java,然后呢,因为分离嘛,所以很有可能不部署在同一个服务器上,也就是请求可能会存在跨域问题,然后呢,一开始的解决方案是使用nginx的反向代理,把api的请求转发到我们的后台,但是后来有发现了可以跨域的方法,因此记录下来

前端

前端想跨域很简单,比如你发送的请求,全局定一个域名就好了,然后发包的时候直接加上去,比如http://www.xxx.com,然后封装的ajax请求,将url前面加上我们的域名,就基本上没啥问题了,但是前端这么做,需要后台的配合,因为ajax是不支持跨域的(包括同IP地址的不同端口的跨域),只有当服务器方的response返回一个所谓的Access-Control-Allow-Origin的header,这个header定义了是否支持跨域请求,所以后台这边做了一下处理。

后台

创建过滤器
public class FinHttpRequestFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        ServletRequest requestWrapper = null;
        HttpServletResponse httpResponse = (HttpServletResponse) response;
        httpResponse.addHeader("Access-Control-Allow-Origin", "*");
        httpResponse.addHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        chain.doFilter(request, response);
    }

    @Override
    public void destroy() {

    }
}

代码很简单,就是利用过滤器,然后每次请求都把response拿过来,把header加上我们的Access-Control-Allow-Origin这个标记,*就是允许所有请求。
然后还要添加一个Access-Control-Allow-Headers,这样子就能允许跨域的时候发过来POST这种请求了,如果不加这个,就会报错

添加过滤器

去我们的web.xml里面,将刚刚的FinHttpRequestFilter添加进去

  <filter>
    <filter-name>requestFilter</filter-name>
    <filter-class>Interceptor.FinHttpRequestFilter</filter-class>
  </filter>

  <filter-mapping>
    <filter-name>requestFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

就是把所有的路径都经过这个过滤器

OPTION处理(最关键的)

前面的其实百度都能找到,但是发现一个问题就是,并不能用,依然是错误。后来我用postman的拦截器抓了包发现,发送的并不是我想要的POST请求,而是OPTION请求(OPT)

那么查询了一下

跨域的请求,浏览器会先向该地址发送一个option请求,来验证是否支持跨域,这个option必须返回200,这个跨域才会被执行

那么我们就明白了,浏览器跨域发送option请求,然后根据option请求中的header来确定是否支持跨域,并进行我们设定好的跨域方法

所以知道了这个,只需要加入对OPTION请求的处理方法就好,而且不需要有任何的操作,所以我选择了对所有OPTION进行拦截,只要返回了200的响应码,就能够跨域成功了

@Controller
@RequestMapping(value = "/", method = RequestMethod.OPTIONS)
public class CmnCtrl {

    @RequestMapping(value = "", method = RequestMethod.OPTIONS)
    @ResponseBody
    public String option(){
        return "";
    }
}

创建一个控制器,对所有OPTION执行一个返回结果,那么不管返回了什么,浏览器能通过200的状态码获知,我们的服务器是支持跨域的,就足够了

跨域成功

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值