CORS同源策略解决跨域方式

介绍

跨源资源共享（Cross-Origin Resource Sharing，CORS）是一种机制，它允许浏览器向其他域发出请求。

在 web 应用中，由于安全原因，浏览器会限制从一个源加载的脚本访问页面的其他源。这种限制被称为跨源资源共享（CORS）限制。

CORS 工作的方式是，当浏览器发送一个跨源请求时，会发送一个预请求（preflight request）到服务器，询问服务器是否允许这个请求。服务器收到预请求后，会返回一个响应头（Access-Control-Allow-Origin），告诉浏览器是否允许这个请求。如果服务器允许这个请求，浏览器才会发出实际的请求。

CORS 通常用于解决浏览器访问跨域资源的问题。例如，如果你有一个应用 A，它在 domain1.com 上运行，它想要访问 domain2.com 上的资源，那么你就需要使用 CORS 来解决这个问题。

跨域解决方案一：

前端vue使用代理解决：

在vue.config.js文件里写如下内容：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080/', //设置要访问的域名和端口号
        changeOrigin: true, //设置为跨域
        pathRewrite: {
          '^/api': '/' //这里理解成用‘/api'代替target里面的地址，在后面发起请求时，/api就会代替target中的值，可以实现跨域
        }
      }
    }
  }
}

然后在请求里面添加/api前缀，比如：

之前是：

axios.create({
	timeout: 15000, // 请求超时时间
	baseURL: 'http://localhost:8080/',
	method: 'post',
	headers: {
		'Content-Type': 'application/json;charset=UTF-8'
	},
	withCredentials :false,
})

现在改成：

axios.create({
	timeout: 15000, // 请求超时时间
	baseURL: '/api/',
	method: 'post',
	headers: {
		'Content-Type': 'application/json;charset=UTF-8'
	},
	withCredentials :false,
})

就解决了跨域问题。

注意：

withCredentials = true

这一条要求在请求头里带上cookie，划重点啊，如果前端配置了这个withCredentials=true，后段设置Access-Control-Allow-Origin不能为 " * ",必须是你的源地址啊

header("Access-Control-Allow-Origin","源地址";
header("Access-Control-Allow-Credentials", "true");

因为从安全性考虑，*是所有的域名都可以读取到数据，可能会读取到cookie等敏感数据。

跨域解决方案二（CORS)：

前端无需更改，后端使用springboot的@CrossOrigin注释来解决：（origins后面的值是前端的域名和端口号，也可以设置为*：代表所以请求，也可不设置）

@CrossOrigin(origins = "http://localhost:8081", maxAge = 3600)
@RestController
public class MyController {
    // controller methods go here
}

然后在application.properties文件里面添加配置

# 允许的来源
spring.cors.allowed-origins=*
# 允许的请求方法
spring.cors.allowed-methods=GET,POST,PUT,DELETE,OPTIONS
# 允许的请求头
spring.cors.allowed-headers=*
# 是否支持 cookie 跨域
spring.cors.allow-credentials=true
# 预检请求的有效期，单位是秒
spring.cors.max-age=3600

跨域解决方案三（CORS)：

（1）前端无需更改，后端使用SSM的过滤器：

使用过滤器来实现跨源资源共享（CORS），你可以这样做：

1. 创建一个过滤器类，并实现 javax.servlet.Filter 接口。
2. 在过滤器类中重写 doFilter 方法。在这个方法中，你可以获取当前的 HttpServletRequest 和 HttpServletResponse 对象，并在响应头中添加跨域相关的信息。

下面是一个示例过滤器类：

public class CORSFilter implements Filter {
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse res = (HttpServletResponse) response;
        res.setHeader("Access-Control-Allow-Origin", "*");
        res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
        res.setHeader("Access-Control-Max-Age", "3600");
        res.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
        chain.doFilter(request, response);
    }
    // ... other methods
}

1. 在你的web.xml中注册过滤器。

<filter>
    <filter-name>CORSFilter</filter-name>
    <filter-class>com.example.CORSFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>CORSFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

这样，你就可以使用过滤器来实现 CORS 了。

（2）如果使用的是springboot没有web.xml文件的话，可以使用 Spring Boot 的自动配置机制来配置 CORS。

1. 创建一个过滤器类，并实现 javax.servlet.Filter 接口。
2. 在过滤器类中重写 doFilter 方法。在这个方法中，你可以获取当前的 HttpServletRequest 和 HttpServletResponse 对象，并在响应头中添加跨域相关的信息。

下面是一个示例过滤器类：

public class CORSFilter implements Filter {
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse res = (HttpServletResponse) response;
        res.setHeader("Access-Control-Allow-Origin", "*");
        res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
        res.setHeader("Access-Control-Max-Age", "3600");
        res.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
        chain.doFilter(request, response);
    }
    // ... other methods
}

1. 创建一个过滤器配置类，并使用 @Bean 注解将过滤器注册到 Spring 容器中。

@Configuration
public class CORSFilterConfig {
    @Bean
    public FilterRegistrationBean<CORSFilter> corsFilter() {
        FilterRegistrationBean<CORSFilter> bean = new FilterRegistrationBean<>();
        bean.setFilter(new CORSFilter());
        bean.addUrlPatterns("/*");
        return bean;
    }
}

这样，你就可以使用 Spring Boot 的自动配置机制来配置 CORS 了。