前端和后端办理跨域问题的方法

现在很多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配置

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

复制代码

3.Nginx代理

正向代理：顺着哀求方向代理，由用户配置，为用户代理服务。拿到要访问的资源。
反向代理：充当响应服务器，对目标服务器提供了哀求转发的功能。
nginx使用的是反向代理：欣赏器访问A服务器，A服务器再将哀求发送到B欣赏器，拿到内容返回给欣赏器。
下载negix，完成配置

服务器监听80端口，哀求带着“/api”就代理到指定的服务器，也可以配置重写url。
上面的场景：前端发送一个api/xxx哀求，negix代理对哀求做处理。将这个哀求代理到后端服务器，并重写了哀求的url。

---

ssm项目后端体现层办理方案

1.在响应头中添加属性

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

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

复制代码

---

springboot项目中，跨域问题后端怎么办理？

CORS：跨域同源共享。在响应头中设置一些配置。access-control-allow-origin属性设置
1.在目标方法上添加@CrossOrigin注解

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

1. import org.springframework.context.annotation.Bean;
2. import org.springframework.context.annotation.Configuration;
3. import org.springframework.web.cors.CorsConfiguration;
4. import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
5. import org.springframework.web.filter.CorsFilter;
8. @Configuration
9. public class CorsConfig {
10.     @Bean
11.     public CorsFilter corsFilter(){
12.         CorsConfiguration corsConfiguration=new CorsConfiguration();
13.         //允许那些域访问
14.         corsConfiguration.addAllowedOrigin("*");
15.         //允许请求头字段
16.         corsConfiguration.addAllowedHeader("*");
17.         //允许请求的方法
18.         corsConfiguration.addAllowedMethod("*");
19.         UrlBasedCorsConfigurationSource source=new UrlBasedCorsConfigurationSource();
20.         //添加映射路径
21.         source.registerCorsConfiguration("/**",corsConfiguration);
22.         return new CorsFilter(source);
23.     }
24. }

复制代码

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

1.    @Override
2.     public void addCorsMappings(CorsRegistry registry){
3.         registry.addMapping("/**")
4.                 .allowedOrigins("*")
5.                 .allowedMethods("*")
6.                 .allowCredentials(true)  //是否允许携带cookie
7.                 .maxAge(3600) //有效时间
8.                 .allowedHeaders("*");
9.     }

复制代码

4.使用代理工具。


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。