前后端项目当中的跨域问题

文章目录

• 一、什么是跨域
• 二、跨域问题
• 三、跨域问题解决方案

---

一、什么是跨域

跨域是指跨域名：域名，记忆网络电脑ip很难记，就给它取了一个名字来记忆，这个名字就要域名。域名最终要被转换为ip地址

www.baidu.com 220.181.38.148

www.jd.com 211.144.24.218

跨域是指跨域名的访问，从一个域名的系统去访问另一个域名系统，以下情况都属于跨域：

ip地址和端口号只要有一个不一样都是跨域

1. 两个不同域名之前相互访问    -    跨域
    例子：www.jd.com 与 www.taobao.com
2. ip地址一样端口号不一样     -   跨域
    例子：www.jd.com:8080 与 www.jd.com:8081  
​
如果域名和端口都相同，但是请求路径不同，不属于跨域，如：
www.jd.com/item 与 www.jd.com/goods【不属于跨域】

二、跨域问题

跨域不一定会有跨域问题。

因为跨域问题是浏览器对于ajax请求的一种安全限制：一个页面发起的ajax请求，只能是于当前页同域名的路径，这能有效的阻止跨站攻击。

因此：跨域问题是针对ajax的一种限制。同步请求是不存在跨域问题的。

但是这却给我们的开发带来了不便，而且在实际生成环境中，肯定会有很多台服务器之间交互，地址和端口都可能不同，怎么办？

三、跨域解决方案

跨域解决方案有很多，见：9种常见的前端跨域解决方案（详解）_慕课手记https://www.imooc.com/article/291931我们的项目选用如下方案

• 后端CORS跨域

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）

CORS需要浏览器和服务器都支持。目前所有浏览器都支持该功能，IE浏览器不能低于IE10。服务端需要设置允许

优势：

1. 在服务端进行控制是否允许跨域，可自定义规则，安全可靠
2. 支持各种请求方式

缺点：会产生额外的请求，要做询问

原理比较复杂。实际上SpringMVC已经帮我们写好了CORS的跨域过滤器：CorsFilter。我们直接用就好了：

package cn.itsource.basic.config;

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 GlobalCorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        //1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //1) 允许的域,不要写/，否则cookie就无法使用了
       config.addAllowedOrigin("http://127.0.0.1:8081");
        config.addAllowedOrigin("http://localhost:8081");
        config.addAllowedOrigin("http://127.0.0.1:80");
        config.addAllowedOrigin("http://localhost:80");
        config.addAllowedOrigin("http://127.0.0.1");
        config.addAllowedOrigin("http://localhost");

        //2) 是否允许发送Cookie信息
        config.setAllowCredentials(true);
        //3) 允许的请求方式
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("DELETE");
        config.addAllowedMethod("PATCH");
        // 4）允许的头信息
        config.addAllowedHeader("*");
        
        //2.添加映射路径，我们拦截一切请求
        UrlBasedCorsConfigurationSource configSource = new
                UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);
        //3.返回新的CorsFilter.
        return new CorsFilter(configSource);
    }
}

测试：

1. 在火狐浏览器中会看到发送两个请求：
    OPTIONS请求 - 询问请求
    POST请求      - 真实请求
2. 发两个请求，在真正的生产环境中效率很低，所以在项目部署我们会使用Nginx反向代理