前后端分离框架跨域问题解决

1. 跨域问题的产生

前端向后台请求，但是后台与前台不是同一个域中（域名，端口，协议任一不同就不是同一个域），那么就会产生跨域问题。

2.跨域问题解决

2.1 传统的项目那么可以直接在Filter过滤器中设置响应的头部信息。

/*** 在过滤器中解决跨域问题*/
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {HttpServletResponse response = (HttpServletResponse) res;response.setHeader("Access-Control-Allow-Origin", "*");response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");//response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");response.setHeader("Access-Control-Max-Age", "1000");response.addHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");//response.addHeader("Access-Control-Allow-Headers", "*");chain.doFilter(req, res);
}

2.2 分布式微服务系统可以在网关中解决跨域问题

@Configuration
public class CorsConfig {@Beanpublic CorsFilter corsFilter() {final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();final CorsConfiguration config = new CorsConfiguration();// 允许cookies跨域config.setAllowCredentials(true);// #允许向该服务器提交请求的URI，*表示全部允许，在SpringMVC中，如果设成*，会自动转成当前请求头中的Originconfig.addAllowedOrigin("*");// #允许访问的头信息,*表示全部config.addAllowedHeader("*");// 预检请求的缓存时间（秒），即在这个时间段里，对于相同的跨域请求不会再预检了config.setMaxAge(18000L);// 允许提交请求的方法，*表示全部允许//config.addAllowedMethod("*");config.addAllowedMethod("OPTIONS");config.addAllowedMethod("HEAD");// 允许Get的请求方法config.addAllowedMethod("GET");config.addAllowedMethod("PUT");config.addAllowedMethod("POST");config.addAllowedMethod("DELETE");config.addAllowedMethod("PATCH");source.registerCorsConfiguration("/**", config);return new CorsFilter(source);}
}

2.3 跨域问题也可以使用nginx代理解决

前后端分离框架跨域问题解决相关推荐

Spring Boot2.x-13前后端分离的跨域问题解决方法之Nginx
文章目录概述浏览器同源策略后台搭建 pom.xml interceptor 配置 Controller 启动测试浏览器和session 后端工程发布到服务器上问题复现通过Nginx反向代理 ...
06-若依前后端分离项目跨域问题解决方式
什么是跨域跨域就是前后端分离项目前端无法把session等信息传递给后端服务器.跨域源自浏览器同源策略.同源策略是一种约定,同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互. ...
Vue+Flask前后端分离 Vue3跨域配置
Vue+Flask前后端分离 Vue3跨域配置前端端口号为8080 后端端口号为5000 问题描述问题解决接口路径映射前端端口号为8080 后端端口号为5000 后端端口API 代码片. @a ...
解决java前后端分离端口跨域问题
解决java前后端分离端口跨域问题参考文章: (1)解决java前后端分离端口跨域问题 (2)https://www.cnblogs.com/mollie-x/p/10449686.html 备忘一 ...
Vue flask前后端分离解决跨域
Vue flask前后端分离解决跨域安装axios 在项目目录下输入:npm install axios--save-dev 配置axios 在main.js中引入axios import axio ...
前后端分离的跨域解决方案
声明: 在以往的开发中,前后端分离也不是像现在这么热门,所谓的前端工程师也只不过是写好静态页面由Java工程师或者php工程师嵌入到页面中进行开发,这或许加重了这些工程师的工作量,而且在样式调试上由纯 ...
前后端分离与跨域的解决方案（CORS的原理）
前后端分离前后端分离的好处最大的好处就是前端JS可以做很大部分的数据处理工作,对服务器的压力减小到最小. 后台错误不会直接反映到前台,错误接秒较为友好. 由于后台是很难去探知前台页面的分布情况,而 ...
前后端分离项目跨域问题及解决方案
目录 1.什么是跨域 2.前后端分离项目中的跨域问题 3.方法一:SpringBoot后端进行处理 4.方法二:在Vue前端进行处理 5.总结 1.什么是跨域请求同域资源: 在域名 (或 ip 地址 ...
Day15(Js入门、jquery入门、ajax入门、前后端分离开发跨域问题、linux环境准备、jdk_tomcat环境搭建、docker介绍及应用(docker安装、基本命令、安装tomcat))
js入门 js代码辅助 window–>preferences–>javaScript–>Content Assist .abcdefghijklmnopqrstuvwxyz alt ...

前后端分离框架跨域问题解决

1. 跨域问题的产生

2.跨域问题解决

前后端分离框架跨域问题解决相关推荐

最新文章

热门文章