前后端分离跨域问题解决方案
2017-10-14 22:44
645 查看
前后端分离跨域问题解决方案
现在的web开发中经常会用到前后分离技术,前后端分解技术,都会涉及到跨域问题。
解决跨域问题的方法:
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; }
}
//统一过滤器设置
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<String> urlPatterns = new ArrayList<String>();
urlPatterns.add("/*");
registrationBean.setUrlPatterns(urlPatterns);
return registrationBean;
}
现在的web开发中经常会用到前后分离技术,前后端分解技术,都会涉及到跨域问题。
解决跨域问题的方法:
第一种解决方案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<String> urlPatterns = new ArrayList<String>();
urlPatterns.add("/*");
registrationBean.setUrlPatterns(urlPatterns);
return registrationBean;
}
相关文章推荐
- 前后端分离跨域问题解决方案
- 前后端分离跨域问题解决方案(在server设置header)
- 前后端分离跨域问题解决方案
- 前后端分离跨域问题解决方案
- 前后端分离nginx配置,同时解决跨域问题
- java 浅析跨域问题以及如何使用Cors解决前后端分离部署项目所遇到的跨域问题
- vue+springboot前后端分离实现单点登录跨域问题解决方法
- 解决前后端分离的 CORS 跨域资源共享问题
- vue2 前后端分离项目ajax跨域session问题解决
- nginx配置反向代理解决前后端分离跨域问题
- 解决前后端分离跨域问题
- nginx配置反向代理解决前后端分离跨域问题
- 前后端分离:利用nginx的rewrite解决跨域问题
- Node学习(4)vue+node 前后端分离项目ajax跨域session问题解决
- vue2 前后端分离项目ajax跨域session问题解决方法
- nginx配置反向代理解决前后端分离跨域问题
- vue前后端分离使用fetch 跨域请求时 session失效问题解决
- 前后端分离 跨域问题解决
- 解决java前后端分离跨域的问题
- 前后端交互解决跨域请求问题