【机房报修管理系统】后端篇（六） 配置Cros解决跨域问题

一、前情提要

---

    上一次我们使用了MyBatisGenerator解决了实体层和Dao层的开发，这一次我们来解决Cros跨域问题。

二、任务详情

---

• 配置Cros拦截器
  
  
  

三、相关介绍

---

1.什么是跨域问题？

     跨域问题，MDN是这样介绍的：《HTTP访问控制（CORS）》

    跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

     简单来说，就是你请求的地址和当前网站的地址不一致，为了安全起见，浏览器就会拦截你的请求，导致请求失败，在浏览器的控制台会出现如下错误 （由于出错时没有截图，此错误图片源自网络）

2.什么时候会出现跨域问题？

    触发条件：

• 网站所在的服务器地址和后端服务器的地址不相同。
• 网站所在服务器地址和后端服务器的IP地址相同，但端口不同。

    在开发前后端分离的项目时会更容易出现，因为前端项目和后端项目一般是两个项目占据不同的IP地址或者是同个IP地址不同端口，这样就会触发跨域问题。

3.如何解决跨域问题？

    解决方法有时候前端和后端的，这里我参考了这一篇文章《前端常见跨域解决方案（全）》

• （前端）通过jsonp跨域
• （前端）document.domain + iframe跨域
• （前端） location.hash + iframe
• （前端）window.name + iframe跨域
• （前端） postMessage跨域
• （后端） 跨域资源共享（CORS）
• （后端）nginx代理跨域
• （后端） nodejs中间件代理跨域
• （前端）WebSocket协议跨域

    在这里我只会着重讲解后端的解决方式，因为前端的我都是一知半解，可能会讲的不对。先会在后端使用CORS，部署时就会使用Nginx。

四、实践操作

---

此次的实践操作很简单，只有一步操作。

1.添加拦截器CorsConfig

在com.repairsystem.config添加拦截器CorsConfig即可

package com.repairsystem.config;

import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @author CheungChingYin
 * @date 2019/1/7
 * @time 14:46
 */
public class CorsConfig implements WebMvcConfigurer {
    
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedMethods("*").
                allowedHeaders("*")
                .maxAge(3600);
    }
}

到这里，配置Cros解决跨域问题所有操作已经完成了。如果您对次篇文章有疑问，可以在文章下方留言，谢谢您的阅读。如对【机房报修管理系统】系列文章有兴趣，可以关注或收藏我的文章，您的支持是我最大的动力，我会尽快推出下一期内容，敬请期待。