前后端跨域问题

什么是前后端跨域问题

启动前端工程，工程首页不能正常显示，查看浏览器报错如下

1
Access to XMLHttpRequest at 'http://localhost:63110/system/dictionary/all' from origin 'http://localhost:8601' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

提示：从http://localhost:8601 访问 http://localhost:63110/system/dictionary/all 被 CORS policy 阻止，因为没有Access-Control-Allow-Origin 头信息。CORS全称是 cross origin resource share 表示跨域资源共享。

从一个地址请求另一个地址，如果协议、主机、端口三者全部一致则不属于跨域，否则有一个不一致则是跨域

比如：

  • 从http://localhost:8601 到 http://localhost:8602 由于端口不同，是跨域。
  • 从http://192.168.101.10:8601 到 http://192.168.101.11:8601 由于主机不同，是跨域。
  • 从http://192.168.101.10:8601 到 https://192.168.101.11:8601 由于协议不同，是跨域。

如何解决跨域问题

JSONP

通过script标签的src属性进行跨域请求，如果服务端要响应内容，则先读取请求参数callback值，callback是一个回调函数的名称，服务端读取callback的值后将响应内容通过调用callback函数的方式告诉请求方

JSONP解决跨域问题

添加响应头

报错信息中有提到

1
No 'Access-Control-Allow-Origin' header is present on the requested resource

可以看出是缺少响应头

因此服务端在响应头添加Access-Control-Allow-Origin: *即可解决跨域问题

Access-Control-Allow-Origin: 192.169.101.66:10000 表示服务端允许 192.169.101.66:10000 这个来源的请求可以访问

而*代表所有来源的请求都可以访问

通过nginx代理跨域

  • 由于服务端之间没有跨域，浏览器通过nginx去访问跨域地址
  • 浏览器先访问http://192.168.101.10:8601 nginx提供的地址，进入页面
  • 此页面要跨域访问 http://192.168.101.11:8601 ，不能直接跨域访问http://www.baidu.com:8601 ，而是访问nginx的一个同源地址，比如：http://192.168.101.11:8601/api ，通过 http://192.168.101.11:8601/api 的代理去访问 http://www.baidu.com:8601
  • 这样就实现了跨域访问。
  • 浏览器到http://192.168.101.11:8601/api 没有跨域
  • nginx到 http://www.baidu.com:8601 通过服务端通信，没有跨域。

nginx解决跨域问题

SpringBoot解决跨域问题

添加如下配置类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@Component
public class GlobalCorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOrigins("*")
                // 设置允许的方法
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                // 是否允许证书（cookies）
                .allowCredentials(true)
                // 跨域允许时间
                .maxAge(3600);
    }
}

启动服务后通过前端进行访问，从请求中可以看到如下内容，则说明允许跨域

允许跨域

ps：其余通过SpringBoot解决跨域的方案参考SpringBoot 解决跨域问题的 5 种方案！_springboot跨域问题解决方案_肥肥技术宅的博客-CSDN博客