背景
前后端分离那么多年了,跨域一直是一个老生常谈的话题,当然也是最基础的问题。相信很多人都有自己的一套解决方案,作为小白的我再次做一个记录当作学习成长吧!
跨域原因
同源策略
同源策略(Same origin policy)是由 NetScape 公司在1995年提出的一种安全策略;同源策略只是一个约定,提出后被各个浏览器厂商采纳,并以各自的方式实现了同源策略。
同源策略:是浏览器最核心也最基本的安全功能,会约束浏览器的行为;
同源策略会限制浏览器:只允许本域内的脚本读写本域内的资源,不允许访问本域外的资源。
判断是否同源?
判断要素有三:协议、域名、端口号;
(三者全部一致才视为同源,即属于同一个域;否则视为非同源。)
直接看例子
限制范围
无法共享 cookie, localStorage, indexDB。
无法操作彼此的 dom 元素。
无法发送 ajax 请求。
解决思路
这里只做大方向的分辨,细节部分不再展开,相信每个大分支下都有很多方法。
1.在前端解决
2.在服务器解决
3.在后端解决
前端
这里先挖好坑吧,毕竟本人不是做前端的,以后学到了进行补充hhhh
服务器
采用nginx反向代理,可以解决这个跨域的问题。
前提:后端没有做任何跨域的处理!!!否则可能导致请求头出问题
思路
监听任意端口,进行反向代理从而做到转发的目的。
当前示例: 前端服务:localhost:8080 后端服务:localhost:8090
1.修改配置文件
server {
listen 2222;
server_name vueDemo;
#代理的路径自行更改
location /qu_ming {
if ($request_method = 'OPTIONS') {
#注意设置8080端口是因为前端服务在8080端口
add_header Access-Control-Allow-Origin 'http://localhost:8080';
add_header Access-Control-Allow-Headers '*';
add_header Access-Control-Allow-Methods '*';
add_header Access-Control-Allow-Credentials 'true';
return 204;
}
if ($request_method != 'OPTIONS') {
#注意设置8080端口是因为前端服务在8080端口
add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
add_header Access-Control-Allow-Credentials 'true';
}
#后端服务的地址
proxy_pass http://127.0.0.1:8090;
}
}
那么问题来了,为什么要判断请求类型呢?这里就很复杂了,本人也是隔壁学来的,理解得不是很透彻,为了不误人子弟就不写了。有兴趣的hxd戳这里 ==>
解决 用 Nginx 处理 跨域问题
2.重启nginx并修改前端访问的接口地址
nginx -s reload 重启nginx
修改地址,改为做转发的端口
后端
后端处理跨域就比较老生常谈了,这里本人的是springboot项目,直接写个跨域配置类就好了。
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() {
final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
final CorsConfiguration corsConfiguration = new CorsConfiguration();
/*是否允许请求带有验证信息*/
//corsConfiguration.setAllowCredentials(true);
/*允许访问的客户端域名*/
corsConfiguration.addAllowedOrigin("*");
/*允许服务端访问的客户端请求头*/
corsConfiguration.addAllowedHeader("*");
/*允许访问的方法名,GET POST等*/
corsConfiguration.addAllowedMethod("*");
urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
return new CorsFilter(urlBasedCorsConfigurationSource);
}
}