web开发必备之跨域

1.什么是跨域？

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
举个例子或许比较生动

当前所在页面	请求的页面	是否同域	原因
https://www.csdn.net/	https://blog.csdn.net/weixin_56703682	√	同源（同域名同协议同端口）
https://www.csdn.net/	http://www.csdn.net/	×	协议不同（http/https）
https://www.csdn.net/	https://github.com/	×	主域名不同
https://www.csdn.net/	https://www.blog.csdn.net/	×	协议不同
http://www.test.com:8848	http://www.test.com:8080/	×	端口不同

2.为什么会出现跨域

跨域问题通常是由于浏览器的同源策略引起的。同源策略要求网页上的脚本只能读取来自同一源（协议、域名、端口）的响应，而不能读取其他源的信息。如果一个网页包含的脚本试图去读取来自不同源的数据，就会触发跨域问题。

这样的设计是为了保护用户的隐私和安全，防止恶意网站窃取用户的信息。然而，它也带来了一些限制，特别是对于现代Web应用来说，跨域访问是很常见的需求，比如从一个域名下请求API接口数据等。

3.怎么解决跨域

为了解决跨域问题，可以采取多种方法，比如使用JSONP、CORS（跨域资源共享）、代理、iframe消息传递等等。

通过使用请求头来解决

通过设置 CORS（跨域资源共享）相关的请求头来实现跨域请求。
java中如何使用springboot来解决呢？
https://spring.io/guides/gs/rest-service-cors

配置的pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>3.2.0</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.example</groupId><artifactId>rest-service-cors-complete</artifactId><version>0.0.1-SNAPSHOT</version><name>rest-service-cors-complete</name><description>Demo project for Spring Boot</description><properties><java.version>17</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.apache.httpcomponents.client5</groupId><artifactId>httpclient5</artifactId><scope>test</scope></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>

在 Java 中实现跨域请求通常涉及到一些网络编程和设置响应头的工作。以下是一些基本的方法来实现跨域请求：

使用 HttpServletResponse 设置响应头：在处理请求的 Java 代码中，可以通过 HttpServletResponse 对象设置一些响应头信息，以允许跨域请求。例如，设置允许的域名、请求方法、头部信息等。

response.setHeader("Access-Control-Allow-Origin", "http://example.com"); // 设置允许跨域的域名
response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS"); // 设置允许的请求方法
response.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization"); // 设置允许的请求头部信息
response.setHeader("Access-Control-Max-Age", "3600"); // 设置预检请求的缓存时间
response.setHeader("Access-Control-Allow-Credentials", "true"); // 设置是否允许发送 Cookie

使用 Filter 进行统一处理：可以编写一个 Filter 来统一处理跨域请求，通过设置响应头来实现跨域访问的授权。

public class CorsFilter implements Filter {@Overridepublic void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)throws IOException, ServletException {HttpServletResponse httpResponse = (HttpServletResponse) response;// 设置允许跨域的域名httpResponse.addHeader("Access-Control-Allow-Origin", "http://example.com");// 设置允许的请求方法httpResponse.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");// 设置允许的请求头部信息httpResponse.addHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");// 设置预检请求的缓存时间httpResponse.addHeader("Access-Control-Max-Age", "3600");// 设置是否允许发送 CookiehttpResponse.addHeader("Access-Control-Allow-Credentials", "true");chain.doFilter(request, response);}
}