跨域的原因和解决-Toy模板网

这篇具有很好参考价值的文章主要介绍了跨域的原因和解决。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

什么是跨越问题

跨域问题源于浏览器的同源策略限制。

同源策略主要是限制cookie的访问，在非同源的情况下，A网页不能够访问B网页， “同源” 即是协议 + 域名 + 端口

同源的设计是为了防止CSRF（跨站请求伪造），举一个例子来说就是A网站是钓鱼网站，当登录银行网址存钱赚钱后，保留了一个cookie识别当前用户，如果能够跨域访问，A网站就能够访问银行网站的cookie，此时钓鱼网站就能够使用银行Cookie来登录转钱了，所以同源策略是必须的。
随着互联网的发展，同源策略越来越严格，不仅限于Cookie的读取。

（1）Cookie、LocalStorage 和 IndexDB 无法读取
（2）DOM 无法获取
（3）请求的响应被拦截

由于这些限制的存在，就出现了跨域问题，下面介绍发生的情况

如何发生的跨越问题

在后端没有做跨域处理的情况下，前端部署在 http://127.0.0.1:5500，后端部署在8818，很明显不符合上述讲到的同源情况，端口不相同，所以会触发跨域问题，下面模拟情况的发生

前端发起请求
跨域的原因和解决
请求成功，后端也有响应返回，但是前端看不到响应结果

跨域问题解决

这里我在后端进行跨域处理，也就是让后端的接口能够被任意请求访问，继承WebMvcConfigurer，这里相当于是让 SpringBoot 帮你把事情做了，如果要手动的话，后面介绍一下。

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //跨域配置
        registry.addMapping("/**")
                //设置允许跨域请求的域名
                .allowedOriginPatterns("*")
                //设置允许跨域的方法
                .allowedMethods("GET","POST","PUT","DELETE")
                .allowedHeaders("*")
                //是否允许证书
                .allowCredentials(true)
                //跨域允许时间
                .maxAge(3600);
    }
}

这段代码的意义就是给HTTP请求的头部加上允许跨域的头部字段，使得HTTP请求正常返回结果

跨域的原因和解决

上面的方法成功解决了跨域问题，但是还有其他的办法么，肯定是有很多方法的，分为前端解决，后端解决，或者使用外部的，比如 nginx反向代理解决，这里我主要介绍Java不使用SpringBoot那套的情况下如何解决。

首先要明确目的，解决跨域问题的方法就是在HTTP请求头上加上相应的参数，因此也就是修改HTTP请求头，考虑采用过滤器拦截接口，获取到接口的请求头，加上响应的参数，所以我们这里使用Filter来解决。

@Configuration
public class WebMvcConfig implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        chain.doFilter(req, res);
    }
}