四种跨域解决方案

1.引出跨域

1.基本介绍

2.具体演示

1.启动之前学习过的springboot-furn项目

2.欣赏器直接访问 localhost:8081/furns 可以体现信息

3.启动前端项目，取消请求拦截器，这样设置，就会出现跨域

4.跨域原因

• 当前端项目请求到后端，会返回跨域请求拦截
  
• 原因是欣赏器默认实行同源策略，会克制读取localhost:8081的资源
  

2.跨域题目介绍

1.是什么？

2.同源策略

3.跨域流程

1.简单请求和非简单请求

1.简单请求

2.非简单请求（不满足简单请求的就黑白简单请求）

2.简单请求-跨域流程

3.非简单请求-跨域流程

4.非简单请求演示

1.这里的添加就黑白简单请求

2.测试请求，预检请求失败，不会发送真实请求

4.跨域解决方案

1.Nginx反向代理

2.设置服务器允许跨域

3.前端启用代理，设置同源

5.跨域实操

1.全局CORS设置

1.后端编写设置类 CorsConfig.java

1. package com.sun.furn.config;
3. import org.springframework.context.annotation.Bean;
4. import org.springframework.context.annotation.Configuration;
5. import org.springframework.web.cors.CorsConfiguration;
6. import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
7. import org.springframework.web.filter.CorsFilter;
9. /**
10. * Description: 全局跨域配置
11. *
12. * @Author sun
13. * @Create 2024/5/15 10:42
14. * @Version 1.0
15. */
16. // 全局跨域配置
17. @Configuration
18. public class CorsConfig {
19.     @Bean
20.     public CorsFilter corsFilter() {
21.         // 创建跨域配置,添加 CORS 配置信息
22.         final CorsConfiguration corsConfiguration = new CorsConfiguration();
23.         // 跨域请求默认不包含 cookie，设置为 true 可以包含 cookie
24.         corsConfiguration.setAllowCredentials(true);
25.         // 支持哪些来源的请求跨域, 支持
26.         corsConfiguration.addAllowedOriginPattern("*");
27.         // corsConfiguration.addAllowedOrigin("*");
28.         // 支持哪些头信息
29.         corsConfiguration.addAllowedHeader("*");
30.         // 支持哪些方法跨域
31.         corsConfiguration.addAllowedMethod("*");
32.         // 添加映射路径
33.         final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource
34.                 = new UrlBasedCorsConfigurationSource();
35.         // /** 是一个正则表达式，表示所有请求 the mapping pattern
36.         // corsConfiguration 跨域配置
37.         urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
38.         // 返回新的 CorsFilter.
39.         return new CorsFilter(urlBasedCorsConfigurationSource);
40.     }
41. }

复制代码

2.成功解决跨域

3.查看响应头，后端允许跨域

2.添加CORS设置类（只是跟上面的形式不同）

1.后端编写设置类 WebMvcConfig.java

1. package com.sun.furn.config;
3. /**
4. * Description: 全局跨域配置
5. *
6. * @Author sun
7. * @Create 2024/5/15 11:49
8. * @Version 1.0
9. */
11. import org.springframework.context.annotation.Configuration;
12. import org.springframework.web.servlet.config.annotation.CorsRegistry;
13. import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;
15. @Configuration
16. public class WebMvcConfig extends WebMvcConfigurationSupport {
17.     @Override
18.     public void addCorsMappings(CorsRegistry registry) {
19.         registry.addMapping("/**") // 允许跨域访问的路径
20.                 .allowedOriginPatterns("*") // 允许跨域访问的源
21.                 .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE") // 允许请求方法
22.                 .maxAge(3600) // 预检间隔时间
23.                 .allowCredentials(true); // 是否发送cookie
24.     }
25. }

复制代码

2.成功解决跨域

3.使用Filter方法实现

1.后端创建一个过滤器 CorsFilter.java

1. package com.sun.furn.filter;
3. import javax.servlet.*;
4. import javax.servlet.annotation.WebFilter;
5. import javax.servlet.http.HttpServletRequest;
6. import javax.servlet.http.HttpServletResponse;
7. import java.io.IOException;
9. /**
10. * Description: 使用过滤器解决跨域问题
11. *
12. * @Author sun
13. * @Create 2024/5/15 13:25
14. * @Version 1.0
15. */
16. @WebFilter(urlPatterns = "*")
17. public class CorsFilter implements Filter {
18.     @Override
19.     public void init(FilterConfig filterConfig) throws ServletException {
20.     }
21.     @Override
22.     public void doFilter(ServletRequest request, ServletResponse response, FilterChain filterChain) throws IOException, ServletException {
23.         HttpServletRequest httpRequest = (HttpServletRequest)request;
24.         HttpServletResponse httpResponse = (HttpServletResponse) response;
25.         httpResponse.setCharacterEncoding("UTF-8");
26.         httpResponse.setContentType("application/json; charset=utf-8");
27.         httpResponse.setHeader("Access-Control-Allow-Origin", "*");
28.         httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
29.         httpResponse.setHeader("Access-Control-Allow-Methods", "*");
30.         httpResponse.setHeader("Access-Control-Allow-Headers", "Content-Type,Authorization");
31.         httpResponse.setHeader("Access-Control-Expose-Headers", "*");
32.         filterChain.doFilter(httpRequest, httpResponse);
33.     }
34.     @Override
35.     public void destroy() {
36.     }
37. }

复制代码

2.启动类添加 @ServletComponentScan 注解，扫描servlet组件

3.成功解决跨域

4.Vue项目启用代理

1.在vue.config.js中添加代理

1. // 跨域配置
2. module.exports = {
3.   devServer: {
4.     port: 9999,  // 本地服务端口
5.     proxy: { //设置代理，必须填
6.       '/api': { //设置拦截器 拦截器格式 斜杠+拦截器名字，名字可以自己定
7.         target: 'http://localhost:8081', //代理的目标地址
8.         changeOrigin: true, //是否设置同源，输入是的
9.         pathRewrite: { //路径重写
10.           '/api': '' //选择忽略拦截器里面的单词
11.         }
12.       }
13.     }
14.   }
15. }

复制代码

2.修改请求以/api的方式发送请求

3.成功解决跨域

• 这种方式就相当于是本机对携带/api的请求举行代理，请求携带 Sec-Fetch-Site:same-origin 表示允许跨域
  

6.跨域小结

1.同源策略限定内容

2.请求跨域了，到底发出去没有

3.form表单可以跨域提交的，但是Ajax请求不可以跨域请求

4.推荐跨域处理方式

• 服务器端解决跨域
  
• Nginx动静分离 + 反向代理
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。