前端和后端解决跨域问题的一些方式详解

 更新时间:2024年07月12日 09:57:26   作者:石以砥焉,以锐为利  
跨域对于正在学习或者已经就业的前端同学而言,就是老朋友,只要涉及请求,前后端交互,开发阶段等关键字,都避不开跨域,这篇文章主要给大家介绍了关于前端和后端解决跨域问题的一些方式,需要的朋友可以参考下

目前很多java web开发都是采用前后端分离框架进行开发,相比于单体项目容易产生跨域问题。

一、跨域问题CORS

1.什么是跨域问题?

 后端接收到请求并返回结果了,浏览器把这个响应拦截了。

2.跨域问题是怎么产生的?

浏览器基于同源策略,如果请求的网页和当前的服务不是同源的,并且发送的是XHR(XMLHttpRequest)请求,就会产生跨域问题。

同源策略:url中的协议、域名、端口号任意一个不同就不同源。注意两个不同的域名指向同一个主机ip也叫不同源。

3.为什么要有同源策略?

CSRF攻击:借助本地浏览器缓存的cookie信息,以当前登陆者的身份模拟发送请求,完成攻击者期待的操作。当攻击者拿到管理员的信息时可能对整个web程序造成重大打击。

csrf防御:

  • 规范使用各个请求方法,比如get请求只能检索信息,不能修改信息。
  • 当用户访问站点时生成一个随机数,并设置成用户发送请求时的cookie。用户提交表单时,要携带随机数。当csrf攻击者发送请求时,由于没有这个随机数,所以请求失败。
  • 在非get请求中增加token并使用拦截器校验。
  • HTTP头中有一个Referer字段,这个字段用以标明请求来源于哪个地址,在访问敏感数据时,先检查referer字段,查看请求来源于哪个地址。如果是本页面的url就可以访问,如果是别的网页的url就禁止访问。
  • 自定义属性加到请求头。通过 XMLHttpRequest 这个类,一次性给所有该类请求加上 csrftoken 这个 HTTP 头属性。
  • 客户端中RequestRodeo 工具通过在客户和服务器之间充当代理来防止CSRF攻击
  • 客户端下载某些插件,对于拦截的请求用户可以自己设置白名单。

二、解决方法

前端解决方式

1.JSONP方案:(只能解决get请求不能解决post请求)

不受同源策略影响的标签:img、script、link 、iframe

 通过在前端动态创建script标签,指定跨域资源的URL,服务器返回的是一段JavaScript代码,前端通过回调函数处理数据。

2.vue解决devServer配置

module.exports = {
    devServer: {
        proxy: {
            '/api': { // 请求的代称,写在Axios里的BaseUrl
                target: 'http://localhost:8088/spring', // 真实请求URl
                ws: true,
                changeOrigin: true, // 允许跨域
                pathRewrite: { //替换,通配/api的替换成对应字符
                //     /* 重写路径,当我们在浏览器中看到请求的地址为:http://localhost:8080/api/core/getData/userInfo 时
                //       实际上访问的地址是:http://localhost:8088/spring/core/getData/userInfo,因为重写了 /api
                //      */
                    '^/api': '' //当你的接口中没有/api字眼时,采用这种,直接替换成空即可
                //     '^/api': '/api'   //当你的接口中刚好有/api 时,采用这种方式
                }
            }
        }
    }
}

3.Nginx代理

正向代理:顺着请求方向代理,由用户配置,为用户代理服务。拿到要访问的资源。

反向代理:充当响应服务器,对目标服务器提供了请求转发的功能。

nginx使用的是反向代理:浏览器访问A服务器,A服务器再将请求发送到B浏览器,拿到内容返回给浏览器。

下载negix,完成配置

服务器监听80端口,请求带着“/api”就代理到指定的服务器,也可以配置重写url。

上面的场景:前端发送一个api/xxx请求,negix代理对请求做处理。将这个请求代理到后端服务器,并重写了请求的url。

ssm项目后端表现层解决方案

1.在响应头中添加属性

在controller代码中写下面这行代码。

response.addHeader("Access-Control-Allow-Origin","http://127.0.0.1:8081");

springboot项目中,跨域问题后端怎么解决?

CORS:跨域同源共享。在响应头中设置一些配置。access-control-allow-origin属性设置

1.在目标方法上添加@CrossOrigin注解

2.添加cors的过滤器统一解决,不用每个方法都加注解

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter(){
        CorsConfiguration corsConfiguration=new CorsConfiguration();
        //允许那些域访问
        corsConfiguration.addAllowedOrigin("*");
        //允许请求头字段
        corsConfiguration.addAllowedHeader("*");
        //允许请求的方法
        corsConfiguration.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source=new UrlBasedCorsConfigurationSource();
        //添加映射路径
        source.registerCorsConfiguration("/**",corsConfiguration);
        return new CorsFilter(source);
    }
}

3.实现WebMvcConfigurer接口,重写addCorsMappings方法

   @Override
    public void addCorsMappings(CorsRegistry registry){
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("*")
                .allowCredentials(true)  //是否允许携带cookie
                .maxAge(3600) //有效时间
                .allowedHeaders("*");
    }

4.使用代理工具。

总结

到此这篇关于前端和后端解决跨域问题的一些方式的文章就介绍到这了,更多相关前端和后端解决跨域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Sentinel的熔断降级、资源规则详解与实例

    Sentinel的熔断降级、资源规则详解与实例

    这篇文章主要介绍了Sentinel的熔断降级、资源规则详解与实例,Sentinel是阿里巴巴开源的一款流量控制和熔断降级的框架,它主要用于保护分布式系统中的服务稳定性,Sentinel通过对服务进行流量控制和熔断降级,可以有效地保护系统的稳定性,需要的朋友可以参考下
    2023-09-09
  • Java实现多项式乘法代码实例

    Java实现多项式乘法代码实例

    今天小编就为大家分享一篇关于Java实现多项式乘法代码实例,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-10-10
  • Java比较问题详细分析

    Java比较问题详细分析

    本篇文章主要给大家讲解了Java中比较问题的相关知识,一起参考学习下吧。
    2017-12-12
  • WeakHashMap 和 HashMap 区别及使用场景

    WeakHashMap 和 HashMap 区别及使用场景

    这篇文章主要为大家介绍了WeakHashMap 和 HashMap 的区别是什么以及何时使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • Java语言----三种循环语句的区别介绍

    Java语言----三种循环语句的区别介绍

    下面小编就为大家带来一篇Java语言----三种循环语句的区别介绍。小编举得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • Spring Security实现基于RBAC的权限表达式动态访问控制的操作方法

    Spring Security实现基于RBAC的权限表达式动态访问控制的操作方法

    这篇文章主要介绍了Spring Security实现基于RBAC的权限表达式动态访问控制,资源权限表达式动态权限控制在Spring Security也是可以实现的,首先开启方法级别的注解安全控制,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • Mybatis分页插件PageHelper的分页原理剖析

    Mybatis分页插件PageHelper的分页原理剖析

    这篇文章主要介绍了Mybatis分页插件PageHelper的分页原理剖析,PageHelper作为一个启动器,那么就和其他启动器加载一样,先读取spring.factories文件里面配置的类,转成Bean加载本系统中,然后执行他的前置后置处理方法,完成初始化,需要的朋友可以参考下
    2023-08-08
  • SpringBoot中配置log4j2日志详解

    SpringBoot中配置log4j2日志详解

    这篇文章主要介绍了SpringBoot中配置log4j2日志详解,Apache Log4j2 是对原先的 Log4j 项目的升级版本,参考了 logback 的一些优秀的设计,并且修复了一些问题,因此带来了一些重大的提升,需要的朋友可以参考下
    2023-11-11
  • Java和C的随机数(Random)详解

    Java和C的随机数(Random)详解

    本篇文章主要介绍了Java和C随机数(Random),现在分享给大家,也给大家做个参考,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-09-09
  • SpringBoot之控制器的返回值处理方式

    SpringBoot之控制器的返回值处理方式

    这篇文章主要介绍了SpringBoot之控制器的返回值处理方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07

最新评论