跨域问题解决

背景

前后端分离那么多年了，跨域一直是一个老生常谈的话题，当然也是最基础的问题。相信很多人都有自己的一套解决方案，作为小白的我再次做一个记录当作学习成长吧！

跨域原因

同源策略

同源策略（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);
    }
}