脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网站技巧 → 服务器 → 服务器其它 → 解决跨域(CORS)问题

跨域(CORS)问题的解决方案分享

 更新时间：2023年02月13日 08:42:12   作者：Perceus  
跨域是指跨域名的访问，如果域名和端口都相同，但是请求路径不同，不属于跨域。跨域不一定会有跨域问题。因为跨域问题是浏览器对于ajax请求的一种安全限制：一个页面发起的ajax请求，只能是于当前页同域名的路径，这能有效的阻止跨站攻击。

前后端分离项目，如何解决跨域问题

跨域资源共享（CORS）是前后端分离项目很常见的问题，本文主要介绍当SpringBoot应用整合SpringSecurity以后如何解决该问题。

什么是跨域问题

CORS全称Cross-Origin Resource Sharing，意为跨域资源共享。当一个资源去访问另一个不同域名或者同域名不同端口的资源时，就会发出跨域请求。如果此时另一个资源不允许其进行跨域资源访问，那么访问的那个资源就会遇到跨域问题。

跨域问题演示及解决

我们使用mall项目的源代码来演示一下跨域问题。此时前端代码运行在8090端口上，后端代码运行在8080端口上，由于其域名都是localhost，但是前端和后端运行端口不一致，此时前端访问后端接口时，就会产生跨域问题。

点击前端登录按钮

此时发现调用登录接口时出现跨域问题。

image-20230211174509434

覆盖默认的CorsFilter来解决该问题

添加GlobalCorsConfig配置文件来允许跨域访问。

package com.macro.mall.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;

/**
 * 全局跨域配置
 * Created by macro on 2019/7/27.
 */
@Configuration
public class GlobalCorsConfig {

    /**
     * 允许跨域调用的过滤器
     */
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        //允许所有域名进行跨域调用
        config.addAllowedOrigin("*");
        //允许跨越发送cookie
        config.setAllowCredentials(true);
        //放行全部原始头信息
        config.addAllowedHeader("*");
        //允许所有请求方法跨域调用
        config.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

或者使用这个配置类

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowCredentials(true)
                .allowedMethods("GET", "POST", "DELETE", "PUT", "PATCH")
                .maxAge(3600);
    }

}

重新运行代码，点击登录按钮

发现需要登录认证的/admin/info接口的OPTIONS请求无法通过认证，那是因为复杂的跨越请求需要先进行一次OPTIONS请求进行预检，我们的应用整合了SpringSecurity，对OPTIONS请求并没有放开登录认证。

image-20230211174521320

设置SpringSecurity允许OPTIONS请求访问

在SecurityConfig类的configure(HttpSecurity httpSecurity)方法中添加如下代码。

.antMatchers(HttpMethod.OPTIONS)//跨域请求会先进行一次options请求
.permitAll()

image-20230211174839138

重新运行代码，点击登录按钮

发现已经可以正常访问。

image-20230211174852577

一次完整的跨域请求

先发起一次OPTIONS请求进行预检

  • 请求头信息：
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Origin: http://localhost:8090
Referer: http://localhost:8090/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36
  • 响应头信息：
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: content-type
Access-Control-Allow-Methods: POST
Access-Control-Allow-Origin: http://localhost:8090
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Content-Length: 0
Date: Sat, 27 Jul 2019 13:40:32 GMT
Expires: 0
Pragma: no-cache
Vary: Origin, Access-Control-Request-Method, Access-Control-Request-Headers
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
  • 请求成功返回状态码为200

发起真实的跨域请求

  • 请求头信息：
Accept: application/json, text/plain
Content-Type: application/json;charset=UTF-8
Origin: http://localhost:8090
Referer: http://localhost:8090/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36
{username: "admin", password: "123456"}
password: "123456"
username: "admin"
  • 响应头信息：
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:8090
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Content-Type: application/json;charset=UTF-8
Date: Sat, 27 Jul 2019 13:40:32 GMT
Expires: 0
Pragma: no-cache
Transfer-Encoding: chunked
Vary: Origin, Access-Control-Request-Method, Access-Control-Request-Headers
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
  • 请求成功返回状态码为200

到此这篇关于跨域(CORS)问题的解决方案分享的文章就介绍到这了,更多相关解决跨域(CORS)问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 阿里云ECS云服务器快照概念及使用教程

    阿里云ECS云服务器快照概念及使用教程

    这篇文章主要介绍了阿里云ECS云服务器快照概念以及使用,阿里云快照服务相当于一种数据备份手段，可以为所有类型的ECS云盘创建快照，用于备份或者恢复云盘的数据，是一种高效的数据容灾手段，需要的朋友可以参考下
    2022-04-04
  • 解决360检测出文件目录列表显示漏洞的方法

    解决360检测出文件目录列表显示漏洞的方法

    这篇文章主要介绍了用360安全检测扫了本站，出现文件目录列表显示漏洞提示和同主机网站安全存在旁注风险警告的解决方法,需要的朋友可以参考下
    2016-04-04
  • dell r710 服务器配置RAID5(3块硬盘做RAID5)

    dell r710 服务器配置RAID5(3块硬盘做RAID5)

    这篇文章主要介绍了dell r710 服务器配置RAID5图文教程,需要的朋友可以参考下
    2014-08-08
  • LVS(Linux Virtual Server)Linux 虚拟服务器介绍及配置(负载均衡系统)

    LVS(Linux Virtual Server)Linux 虚拟服务器介绍及配置(负载均衡系统)

    LVS(Linux Virtual Server) 是Unix-like系统中的一个虚拟服务器，是国内贡献给开源组织的一个最优秀的项目之一
    2012-05-05
  • 教你安装磁盘阵列：组建RAID需要几块硬盘

    教你安装磁盘阵列：组建RAID需要几块硬盘

    这篇文章主要为大家分享下如何安装磁盘阵列，同时介绍了不用阵列的区别与应用范围,需要的朋友可以参考下
    2014-05-05
  • 轻量级域名解析服务器之dnsmasq的介绍与部署

    轻量级域名解析服务器之dnsmasq的介绍与部署

    dnsmasq这个轻量级的dns服务器,具有开源,搭建简单,维护成本低的优点,符合生产环境需求,下面这篇文章主要给大家介绍了关于轻量级域名解析服务器之dnsmasq的介绍与部署的相关资料,需要的朋友可以参考下
    2022-07-07
  • k8s监控数据组件Pod自动化进行扩缩容HPA

    k8s监控数据组件Pod自动化进行扩缩容HPA

    这篇文章主要为大家介绍了监控数据组件Pod自动化进行扩缩容-HPA的全面讲解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步
    2022-03-03
  • win10 docker-toolsbox 搭建php开发环境的教程

    win10 docker-toolsbox 搭建php开发环境的教程

    这篇文章主要介绍了win10 docker-toolsbox 搭建php开发环境的教程，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • imail8.22安装激活实例[图文]

    imail8.22安装激活实例[图文]

    今天制作此实例的目的是因为前几天我提供了IMAIL8.22中文模板和算号器,这几天问我怎么注册的人还挺多,一句话又讲不清,不讲吧,又觉得对不起朋友们,所以花了点时间,做了此实例,方便朋友们使用,高手就不用看了
    2011-09-09
  • Redis服务器笔记

    Redis服务器笔记

    redis是一个高性能的key-value存储系统，能够作为缓存框架和队列。下面通过本文给大家分享Redis服务器的笔记，感兴趣的朋友一起看看吧
    2017-09-09

最新评论