博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
5、前后端分离跨域问题
阅读量:7180 次
发布时间:2019-06-29

本文共 2357 字,大约阅读时间需要 7 分钟。

hot3.png

在以往的开发中,前后端分离也不是像现在这么热门,所谓的前端工程师也只不过是写好静态页面由Java工程师或者php工程师嵌入到页面中进行开发,这或许加重了这些工程师的工作量,而且在样式调试上由纯html代码到jsp,asp,php调试起来要两个工程师一起商量着找问题,解决起来成本也很高。前后端分离,前端工程师不仅仅要负责展现,而且要编写相应的代码使得dom渲染,网络交互都focus在前端工程师这里。这样服务器端工程师则更加有精力来维护代码的逻辑性,事务性,性能等。是啊,技术框架百花齐放的今天,前端也要mvc了。angular,vue等。下面我将自身实践简述如何解决跨域问题

第一种解决方案jsonp(不推荐使用)

这种方案其实我是不赞同的,第一,在编码上jsonp会单独因为回调的关系,在传入传出还有定义回调函数上都会有编码的”不整洁”.简单阐述jsonp能够跨域是因为javascript的script标签,通过服务器返回script标签的code,使得该代码绕过浏览器跨域的限制。并且在客户端页面按照格式定义了回调函数,使得script标签返回实现调用

第二种方案,反向代理(推荐使用)

代理访问其实在实际应用中有很多场景,在跨域中应用的原理做法为:通过反向代理服务器监听同端口,同域名的访问,不同路径映射到不同的地址,比如,在nginx服务器中,监听同一个域名和端口,不同路径转发到客户端和服务器,把不同端口和域名的限制通过反向代理,来解决跨域的问题,案例如下:

server {        listen       80;        server_name  domain.com;        #charset koi8-r;        #access_log  logs/host.access.log  main;        location /client { #访问客户端路径            proxy_pass http://localhost:81;            proxy_redirect default;        }        location /apis { #访问服务器路径            rewrite  ^/apis/(.*)$ /$1 break;            proxy_pass   http://localhost:82;       }}

第三种方案在server设置header

通过设置server的header来设置浏览器对于服务器跨域的限制,具体实现如下:

//统一过滤器设置public class DomainFilter  implements Filter {    @Override    public void init(FilterConfig filterConfig) throws ServletException {    }    @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-Max-Age", "3600");        response.addHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");        chain.doFilter(req, res);    }    @Override    public void destroy() {    }}//spring boot过滤器设置    @Bean    public FilterRegistrationBean filterRegistrationBean() {        FilterRegistrationBean registrationBean = new FilterRegistrationBean();        DomainFilter domainFilter = new DomainFilter();        registrationBean.setFilter(domainFilter);        List
urlPatterns = new ArrayList
(); urlPatterns.add("/*"); registrationBean.setUrlPatterns(urlPatterns); return registrationBean; }

 

转载于:https://my.oschina.net/u/3551274/blog/2208877

你可能感兴趣的文章
【译】Spring 4 自动装配、自动检测、组件扫描示例
查看>>
使用VS Code从零开始开发调试.NET Core 1.1
查看>>
openssl req 证书请求及自签名证书
查看>>
《linux 内核全然剖析》编译linux 0.12 内核 Ubuntu 64bits 环境
查看>>
路由器不重启,是否ip就永远不变
查看>>
安卓数据传递之---putextra与putextras
查看>>
【后会有期】
查看>>
Codeforces Round #346 (Div. 2) - D Bicycle Race
查看>>
nginx php上传大小设置
查看>>
spring原理机制
查看>>
Oracle分析函数-nulls first/nulls last
查看>>
Python中时间类解决类似朋友圈时间显示的小问题
查看>>
NodeJs针对Express框架配置Mysql进行数据库操作
查看>>
基于MNIST数据集使用TensorFlow训练一个没有隐含层的浅层神经网络
查看>>
Hive修改表
查看>>
Leetcode刷题记录:编码并解码短网址
查看>>
【数据分析】Superset 之四 直接安装
查看>>
Swift - what's the difference between metatype .Type and .self?
查看>>
Matroid[转]
查看>>
Android 实现歌词同步
查看>>