java前后端分离跨域解决方案

1.由于浏览器的同源策略，前后端分离的时候会出现跨域的问题。
java 的解决方案是：
手写一个corsFilter 实现 Filter . 然后在 doFilter 方法中定义：
笔者用的springboot ，其他架构可能配置方式有所不同

@Component
@ServletComponentScan
@WebFilter(urlPatterns = "/*",filterName = "CorsFilter")
public class CorsFilter implements Filter {private static Logger log = Logger.getLogger(CorsFilter.class);@Value("${curvar}")private String curvar;@Overridepublic void init(FilterConfig filterConfig) throws ServletException {log.info("添加自定义注解 {}" +curvar);System.out.print("添加自定义注解" + curvar);}@Overridepublic void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)throws IOException, ServletException {HttpServletResponse response = (HttpServletResponse) servletResponse;//跨域response.setHeader("Access-Control-Allow-Origin", "*");//跨域 Headerresponse.setHeader("Access-Control-Allow-Methods", "*");response.setHeader("Access-Control-Allow-Headers", "Content-Type,XFILENAME,XFILECATEGORY,XFILESIZE");filterChain.doFilter(servletRequest, servletResponse);}@Overridepublic void destroy() {}}

前端的调用不受影响：

--------------------------------------- JS代码开始-------------------------------------------------------------------$("#btnButton").click(function () {var userName=$('#userName').val();  var password=$('#password').val();  var age=$('#age').val();  var email=$('#email').val();  var userbean={userName:userName,password:password,age:age,email:email};console.log(userbean); //Ajax调用处理$.ajax({  type: "POST",  contentType : "application/json ; charset=utf-8",  url:"http://127.0.0.1:8080/user/addUser",  data:JSON.stringify(userbean),  dataType: "json",  async: false,  success:function(data){  alert("..");  }  });
});--------------------------------------- JS代码结束-------------------------------------------------------------------

唯一要注意的是 data需要转成 json

data:JSON.stringify(userbean);

java前后端分离跨域解决方案相关推荐

pc网站调用微服务器,【微服务】前后端分离-跨域问题和解决方案
跨域问题存在的原因跨域问题的根本原因:因为浏览器收到同源策略的限制,当前域名的js只能读取同域下的窗口属性.什么叫做同源策略?就是不同的域名, 不同端口, 不同的协议不允许共享资源的,保障浏览器安全 ...
前后端分离跨域问题解决方案
问题因为最近在学习vue和springboot.用到了前后端分离.前端webpack打包运行的时候会启动nodejs的服务器占用8080端口,后端springboot自带tomcat启动占用1111 ...
Springboot整合Shiro前后端分离跨域问题
Springboot整合Shiro前后端分离跨域问题前言:SpringBoot整合shiro进行前后端分离开发时(前端是Vue),项目做了跨域配置,但还是前端请求会出现cros err–显示的跨域问 ...
【python学习笔记】关于python Flask前后端分离跨域问题
关于python Flask前后端分离跨域问题前后端分离过程中,前后端对接测试难免遇到跨域问题.因为是个新司机,所以在我经过一天的测试,才找到解决办法=-= 第一种方法 from functools ...
nginx处理前后端分离跨域问题
在微服务中,通常会使用前后端分离的方式进行开发和部署.由于前后端分开部署,属于不同的"资源",因此前端调用后端API时可能会出现跨域问题,Cross-Origin Resource ...
cors 前后端分离跨域问题_前后端分离之CORS跨域访问踩坑总结
前言前后端分离的开发模式越来越流行,目前绝大多数的公司与项目都采取这种方式来开发,它的好处是前端可以只专注于页面实现,而后端则主要负责接口开发,前后端分工明确,彼此职责分离,不再高度耦合,但是由于这 ...
前后端分离跨域问题Access to XMLHttpRequest at ‘http://localhos...has been blocked by CORS policy: No ‘Access-
完整报错如下: Access to XMLHttpRequest at 'http://localhost:8081/login' from origin 'http://localhost:8084 ...
前后端分离跨域问题解决
跨域的实现原理 http 跨域请求后端服务的时候会在请求头中带上如下信息 Origin: http://api.jijs.com 后端服务器需要在http的响应头中添加以下响应头 Access-Con ...
vue axios 实现文件流下载（前后端分离跨域问题的解决）
前端代码后端以流的形式返回单个文件下载 @RequestMapping(value = "download", method = RequestMethod.POST)@Api ...
nginx配置反向代理解决前后端分离跨域问题
2019独角兽企业重金招聘Python工程师标准>>> 摘自<AngularJS深度剖析与最佳实践>P132 nginx配置文件如下: server {listen 80 ...

java前后端分离跨域解决方案

java前后端分离跨域解决方案相关推荐

最新文章

热门文章