前后端分离解决Ajax跨域问题

最新推荐文章于 2023-11-28 18:41:58 发布

转载最新推荐文章于 2023-11-28 18:41:58 发布 · 436 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/4061880/blog/2999645

文章标签：

#python #后端 #java

本文详细解析了同源策略的概念及其在浏览器安全中的作用，同时介绍了CORS作为跨源AJAX请求的标准解决方案，包括如何在前后端分离的环境中通过Spring+SpringMVC配置过滤器来实现跨域访问。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

一、同源策略

同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。
同源策略的目的是为了保证用户信息的安全。防止恶意的网站盗取数据。

二、通过CORS解决Ajax跨域

CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是W3C标准，是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求，CORS允许任何类型的请求。

假设环境为前后端分离的web环境：

前端：使用Vue的axios异步请求后台数据
后端：Spring+SpringMVC
服务器：Tomcat

注意：服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问，因此可配置过滤器的方式解决Ajax跨域。

1、在web.xml中配置过滤器

<!-- 支持跨域请求 -->
<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>com.joker.support.CorsFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

2、实现过滤器

public class CorsFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
        httpResponse.addHeader("Access-Control-Allow-Origin", "*");
        httpResponse.addHeader("Access-Control-Allow-Credentials", "*");
        httpResponse.addHeader("Access-Control-Allow-Methods", "GET,HEAD,POST,PUT,DELETE,TRACE,OPTIONS,PATCH");
        httpResponse.addHeader("Access-Control-Allow-Headers", "Content-Type," + "x-access-token");
        filterChain.doFilter(servletRequest, servletResponse);
    }

    @Override
    public void destroy() {

    }
}

转载于:https://my.oschina.net/u/4061880/blog/2999645