东莞手机网站价格便宜,黑龙江建设教育信息网,长春网站建设平台,wordpress拖拽上传文章目录 1.引出跨域1.基本介绍2.具体演示1.启动之前学习过的springboot-furn项目2.浏览器直接访问 [localhost:8081/furns](http://localhost:8081/furns) 可以显示信息3.启动前端项目#xff0c;取消请求拦截器#xff0c;这样设置#xff0c;就会出现跨域4.跨域原因 2.跨… 文章目录 1.引出跨域1.基本介绍2.具体演示1.启动之前学习过的springboot-furn项目2.浏览器直接访问 [localhost:8081/furns](http://localhost:8081/furns) 可以显示信息3.启动前端项目取消请求拦截器这样设置就会出现跨域4.跨域原因 2.跨域问题介绍1.是什么2.同源策略 3.跨域流程1.简单请求和非简单请求1.简单请求2.非简单请求不满足简单请求的就是非简单请求 2.简单请求-跨域流程3.非简单请求-跨域流程4.非简单请求演示1.这里的添加就是非简单请求2.测试请求预检请求失败不会发送真实请求 4.跨域解决方案1.Nginx反向代理2.配置服务器允许跨域3.前端启用代理配置同源 5.跨域实操1.全局CORS配置1.后端编写配置类 CorsConfig.java2.成功解决跨域3.查看响应头后端允许跨域 2.添加CORS配置类只是跟上面的形式不同1.后端编写配置类 WebMvcConfig.java2.成功解决跨域 3.使用Filter方法实现1.后端创建一个过滤器 CorsFilter.java2.启动类添加 ServletComponentScan 注解扫描servlet组件3.成功解决跨域 4.Vue项目启用代理1.在vue.config.js中添加代理2.修改请求以/api的方式发送请求3.成功解决跨域 6.跨域小结1.同源策略限制内容2.请求跨域了到底发出去没有3.form表单可以跨域提交的但是Ajax请求不可以跨域请求4.推荐跨域处理方式 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
package com.sun.furn.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;/*** Description: 全局跨域配置** Author sun* Create 2024/5/15 10:42* Version 1.0*/
// 全局跨域配置
Configuration
public class CorsConfig {Beanpublic CorsFilter corsFilter() {// 创建跨域配置,添加 CORS 配置信息final CorsConfiguration corsConfiguration new CorsConfiguration();// 跨域请求默认不包含 cookie设置为 true 可以包含 cookiecorsConfiguration.setAllowCredentials(true);// 支持哪些来源的请求跨域, 支持corsConfiguration.addAllowedOriginPattern(*);// corsConfiguration.addAllowedOrigin(*);// 支持哪些头信息corsConfiguration.addAllowedHeader(*);// 支持哪些方法跨域corsConfiguration.addAllowedMethod(*);// 添加映射路径final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource new UrlBasedCorsConfigurationSource();// /** 是一个正则表达式表示所有请求 the mapping pattern// corsConfiguration 跨域配置urlBasedCorsConfigurationSource.registerCorsConfiguration(/**, corsConfiguration);// 返回新的 CorsFilter.return new CorsFilter(urlBasedCorsConfigurationSource);}
}
2.成功解决跨域 3.查看响应头后端允许跨域 2.添加CORS配置类只是跟上面的形式不同
1.后端编写配置类 WebMvcConfig.java
package com.sun.furn.config;/*** Description: 全局跨域配置** Author sun* Create 2024/5/15 11:49* Version 1.0*/import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;Configuration
public class WebMvcConfig extends WebMvcConfigurationSupport {Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping(/**) // 允许跨域访问的路径.allowedOriginPatterns(*) // 允许跨域访问的源.allowedMethods(POST, GET, PUT, OPTIONS, DELETE) // 允许请求方法.maxAge(3600) // 预检间隔时间.allowCredentials(true); // 是否发送cookie}
}2.成功解决跨域 3.使用Filter方法实现
1.后端创建一个过滤器 CorsFilter.java
package com.sun.furn.filter;import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;/*** Description: 使用过滤器解决跨域问题** Author sun* Create 2024/5/15 13:25* Version 1.0*/
WebFilter(urlPatterns *)
public class CorsFilter implements Filter {Overridepublic void init(FilterConfig filterConfig) throws ServletException {}Overridepublic void doFilter(ServletRequest request, ServletResponse response, FilterChain filterChain) throws IOException, ServletException {HttpServletRequest httpRequest (HttpServletRequest)request;HttpServletResponse httpResponse (HttpServletResponse) response;httpResponse.setCharacterEncoding(UTF-8);httpResponse.setContentType(application/json; charsetutf-8);httpResponse.setHeader(Access-Control-Allow-Origin, *);httpResponse.setHeader(Access-Control-Allow-Credentials, true);httpResponse.setHeader(Access-Control-Allow-Methods, *);httpResponse.setHeader(Access-Control-Allow-Headers, Content-Type,Authorization);httpResponse.setHeader(Access-Control-Expose-Headers, *);filterChain.doFilter(httpRequest, httpResponse);}Overridepublic void destroy() {}
}2.启动类添加 ServletComponentScan 注解扫描servlet组件 3.成功解决跨域 4.Vue项目启用代理
1.在vue.config.js中添加代理
// 跨域配置
module.exports {devServer: {port: 9999, // 本地服务端口proxy: { //设置代理必须填/api: { //设置拦截器 拦截器格式 斜杠拦截器名字名字可以自己定target: http://localhost:8081, //代理的目标地址changeOrigin: true, //是否设置同源输入是的pathRewrite: { //路径重写/api: //选择忽略拦截器里面的单词}}}}
}2.修改请求以/api的方式发送请求 3.成功解决跨域
这种方式就相当于是本机对携带/api的请求进行代理请求携带 Sec-Fetch-Site:same-origin 表示允许跨域 6.跨域小结
1.同源策略限制内容 2.请求跨域了到底发出去没有 3.form表单可以跨域提交的但是Ajax请求不可以跨域请求 4.推荐跨域处理方式
服务器端解决跨域Nginx动静分离 反向代理
