素材巴巴 > 程序开发 >

前后端代码分离跨域问题

程序开发 2023-09-12 16:01:45

一: 当前端访问为post访问,而后端代码只允许get格式时 访问会失败,浏览器报错错误 会像跨域

二:后端定义header

架设在laravel 可以在前段访问的中间键中定义

 

三:使用jsonp(不推荐使用)

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

文章未完成:学习资料

https://blog.csdn.net/longxingzhiwen/article/details/55657168

原文地址:https://blog.csdn.net/zhang6622056/article/details/75221492/

声明:
在以往的开发中,前后端分离也不是像现在这么热门,所谓的前端工程师也只不过是写好静态页面由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;
    }


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。