跨域、JSONP、CORS、Spring、Spring Security解决方案

json

适用于现代 C++ 的 JSON。

项目地址：https://gitcode.com/gh_mirrors/js/json

免费下载资源

johnny233

729人浏览 · 2024-06-05 23:58:32

johnny233 · 2024-06-05 23:58:32 发布

概述

JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。跨域是浏览器（如Chrome浏览器基于JS V8引擎，可以简单理解为JS解释器）的一种同源安全策略，是浏览器单方面限制脚本的跨域访问。因此，仅有客户端运行在浏览器时才存在跨域问题，才需要考虑如何解决这个问题。

浏览器控制台输出类似于：No 'Access-Control-Allow-Origin' header is present on the requested resource.这种报错信息，即表明遇到跨域问题。

对跨域理解的一个误区是：资源跨域时无法请求。实际上，通常情况下请求是可以正常发起的（部分浏览器存在特例），后端也正常进行处理，只是在返回时被浏览器拦截，导致响应内容不可使用。可以论证这一点的著名案例就是CSRF跨站攻击。

什么情况下会出现跨域？不同源的访问，就是跨域请求。同源的定义是，即同一个请求来源，包括主机名、协议和端口号。例如：

https://blog.csdn.net和https://geek.csdn.net，两个不同的二级域名，存在跨域问题
http://blog.csdn.net和https://blog.csdn.net，使用不同的协议，存在跨域问题
https://blog.csdn.net和https://blog.csdn.net:3000，使用不同的端口号，存在跨域问题。注：此处使用的3000端口仅仅是在举例，CSDN不会暴露出3000端口的服务。
https://blog.csdn.net/lonelymanontheway和https://blog.csdn.net/about/，虽然文件夹不同，但是是相同域名下，不存在跨域问题。

跨域问题普遍么？在现在前后端分离，微服务化之后，会存在许多不同的域名，这种情况下，就存在非常普遍的跨域问题。

从原理上说，跨域实际上就是在HTTP请求的消息头部分新增一些字段：

// 浏览器自己设置的请求域名
Origin
// 浏览器告诉服务器请求需要用到的HTTP方法
Access-Control-Request-Method
// 浏览器告诉服务器请求需要用到的HTTP消息头
Access-Control-Request-Headers

当浏览器进行跨域请求时会和服务器端进行一次握手（OPTION请求），从响应结果中可以获取如下信息，有些是服务端必须要设置的，有些则是可选的：

// 指定哪些客户端的域名允许访问这个资源
Access-Control-Allow-Origin
// 服务器支持的HTTP方法
Access-Control-Allow-Methods
// 需要在正式请求中加入的HTTP消息头
Access-Control-Allow-Headers
// 取值为true时，浏览器会在接下来的真实请求中携带用户凭证信息（cookie等），服务器也可以使用Set-Cookie向用户浏览器写入新的cookie。使用AccessControl-Allow-Credentials时，Access-Control-Allow-Origin不应该设置为*
Access-Control-Allow-Credentials
// 用于指明本次预检请求的有效期，单位为秒。在有效期内，预检请求不需要再次发起
Access-Control-Max-Age
// 
Access-Control-Expose-Headers

上述几个请求及响应头，可以在Tomcat的源码org.apache.catalina.filters.CorsFilter里找到。

只要服务器合理设置了这些响应结果中的消息头，就相当于实现对CORS的支持，从而支持跨源通信。

结论：
跨域问题是客户端（前端、或叫浏览器）出于安全考虑引发的问题，而如何解决此问题需要依赖于服务端（后端，包括运维）。

解决方案

JSONP

JSON with Padding。由于浏览器允许一些带src属性的标签跨域，如，iframe、script、img等，所以JSONP利用script标签可以实现跨域。

JSONP是带有回调函数callback的JSON，可用于解决主流浏览器的跨域数据访问的问题。但JSONP方案的局限性在于只能实现GET请求。

JSONP实际上是在需要返回的JSON数据外，用JS函数进行封装。具体来说，服务器返回一个JS函数，参数是一个JSON数据如：callback(JSON 数据)，AJAX不能跨域访问，但JS脚本是可以跨域执行的，因此前端将执行这个callback函数，并获取其中的JSON数据。

如果需要返回的JSON数据如下：

[{"id": 2,"name": "ipad mini","price": 2500}]

则对应的JSONP格式是：
callback([{"id":2,"name":"ipad mini","price":2500}]);

使用jQuery发送基于JSONP的AJAX请求：

$.ajax({
	type: 'get',
	url: 'http://localhost:8080/api/product/10086',
	dataType: 'jsonp',
	jsonp: '_jsonp',
	jsonpCallback: 'callback',
	success: function(data) {
		var template = $("#product_table_template").html();
		var render = Handlebars.compile(template);
		var html = render({
			data: data
		});
		$('#product').html(html);
	}
});

三个参数选项的解释：

dataType：必须为jsonp，表示返回的数据类型为JSONP格式
jsonp：表示URL中JSONP回调函数的参数名
jsonpCallback：表示回调函数的名称，若未指定，由jQuery自动生成

中间转发层

跨域问题的核心是不同源访问。如果转换成同源请求，就不存在这个问题。因此通过搭建中间层，通过将服务端的请求进行转发，即增加dispatcher一层，那么前端请求的地址会被转发，可解决跨域问题。

当然，如果对性能有考量的产品，就需要慎重选择这个方案，因为多一层中间转发，对网络开销有一定影响。

Nginx反向代理

需要搭建一个Nginx中转服务器，用于转发请求。通过Nginx解析URL地址时进行判断，将请求转发的具体的服务器上。
在这里插入图片描述
当用户请求xx.720ui.com/server1的时候，Nginx会将请求转发给Server1这个服务器上的具体应用，从而达到跨域的目的。

CORS

Cross Origin Resource Sharing，跨域资源共享，参考W3C提出的CORS规范。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，用户不会有感觉。因此，实现CORS通信的关键是服务端。服务端只需添加相关响应头信息，即可实现客户端发出跨域请求。

浏览器首先会发起一个请求方法为OPTIONS的预检请求，用于确认服务器是否允许跨域，只有在得到许可后才会发出实际请求。预检请求还允许服务器通知浏览器跨域携带身份凭证（如cookie）。

但是，CORS不支持低版本的IE浏览器，如IE8以下的版本。如果想在IE8中使用jQuery发送AJAX请求时，需要配置$.support.cors = true，才能开启CORS特性。

在这里插入图片描述
在Java Web开发中，解决跨域问题的方案有很多。

Filter

Tomcat内置一个org.apache.catalina.filters.CorsFilter。

Spring Web（即maven spring-web模块）提供org.springframework.web.filter.CorsFilter，该过滤器会先判断来自客户端的请求是不是一个跨域请求，然后根据CORS配置判断该请求是否合法：

protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
	CorsConfiguration corsConfiguration = this.configSource.getCorsConfiguration(request);
	boolean isValid = this.processor.processRequest(corsConfiguration, request, response);
	if (isValid && !CorsUtils.isPreFlightRequest(request)) {
		filterChain.doFilter(request, response);
	}
}

使用spring-web模块提供的CorsFilter，可实现全局级别的跨域设置。

如果想要针对某个域名设置允许跨域请求，也可以自定义一个CrossFilter

public class CrossFilter implements Filter {
	@Override
	public void init(FilterConfig filterConfig) throws ServletException {
	}
	@Override
	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
		HttpServletResponse res = (HttpServletResponse) response;
		res.addHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE");
		res.addHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");
		res.addHeader("Access-Control-Allow-Origin", "https://blog.csdn.net");
		res.addHeader("Access-Control-Max-Age", "1800");
		res.addHeader("Access-Control-Allow-Credentials", "true");
	}

	@Override
	public void destroy() {
	}
}

Java Config

借助于spring-webmvc提供的CorsRegistry和WebMvcConfigurer，也可以实现如下配置类：

import jakarta.servlet.Filter;
import org.springframework.boot.web.servlet.FilterRegistrationBean;
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;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
@EnableWebMvc
public class CrossConfig {
	@Bean
	public WebMvcConfigurer corsConfigurer() {
		return new WebMvcConfigurer() {
			@Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                        .allowedOrigins("https://blog.csdn.net")
                        .allowedMethods("PUT", "DELETE")
                        .allowedHeaders("header1", "header2", "header3")
                        .exposedHeaders("header1", "header2")
                        .allowCredentials(false)
                        .maxAge(3600);
            }
        };
    }

    @Bean
    public FilterRegistrationBean<Filter> corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("https://blog.csdn.net");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean<Filter> bean = new FilterRegistrationBean<>(new CorsFilter(source));
        bean.setOrder(0);
		return bean;
	}
}

@CrossOrigin

spring-web提供@CrossOrigin注解，源码如下：

// 此注解可用于方法或类
@Target({ElementType.TYPE, ElementType.METHOD})
@Retention(RetentionPolicy.RUNTIME)
@Documented
public @interface CrossOrigin {
	// 以数组形式支持配置多个origin，作用和origins方法一样，如果为空则表示origin=*，即允许全部域名，不建议设置为*
    @AliasFor("origins")
    String[] value() default {};

    @AliasFor("value")
    String[] origins() default {};

    String[] originPatterns() default {};

    String[] allowedHeaders() default {};

    String[] exposedHeaders() default {};

    RequestMethod[] methods() default {};

    String allowCredentials() default "";

    String allowPrivateNetwork() default "";
    // 允许跨域访问的最大时间，过期后，客户端再次请求会出现跨域问题。不设置则默认值为-1，表示设置的跨域规则永远生效
    long maxAge() default -1L;
}

如何使用@CrossOrigin注解，参考代码片段：

@CrossOrigin(origins = "http://domain2.com", maxAge = 3600)
@RestController
@RequestMapping("/account")
public class AccountController {
	@GetMapping("/{id}")
	public void retrieve(@PathVariable Long id) {
	}
}

Spring Security

基于CorsFilter，在Spring Security应用开发中，支持CORS的配置非常简单，：

@Override
protected void configure(HttpSecurity http) throws Exception {
	http.cors(c -> {
		CorsConfigurationSource source = request -> {
			CorsConfiguration config = new CorsConfiguration();
			config.setAllowedOrigins(Arrays.asList("*"));
			config.setAllowedMethods(Arrays.asList("*"));
			return config;
		};
		c.configurationSource(source);
	});
}

至于具体的实现原理，参考CorsProcessor接口的唯一实现类DefaultCorsProcessor的方法handleInternal方法：

protected boolean handleInternal(ServerHttpRequest request, ServerHttpResponse response, CorsConfiguration config, boolean preFlightRequest) throws IOException {
	// 实际请求的Origin
    String requestOrigin = request.getHeaders().getOrigin();
    // 配置里被允许的Origin
    String allowOrigin = this.checkOrigin(config, requestOrigin);
    HttpHeaders responseHeaders = response.getHeaders();
    if (allowOrigin == null) {
        logger.debug("Reject: '" + requestOrigin + "' origin is not allowed");
        this.rejectRequest(response);
        return false;
    } else {
    	// 实际请求的方法Method
        HttpMethod requestMethod = this.getMethodToUse(request, preFlightRequest);
        // 配置里被允许的Method
        List<HttpMethod> allowMethods = this.checkMethods(config, requestMethod);
        if (allowMethods == null) {
            logger.debug("Reject: HTTP '" + requestMethod + "' is not allowed");
            this.rejectRequest(response);
            return false;
        } else {
        	// 实际请求头
            List<String> requestHeaders = this.getHeadersToUse(request, preFlightRequest);
            // 配置里被允许的请求头
            List<String> allowHeaders = this.checkHeaders(config, requestHeaders);
            if (preFlightRequest && allowHeaders == null) {
                logger.debug("Reject: headers '" + requestHeaders + "' are not allowed");
                this.rejectRequest(response);
                return false;
            } else {
            	// 检查通过，设置响应头
                responseHeaders.setAccessControlAllowOrigin(allowOrigin);
                if (preFlightRequest) {
                    responseHeaders.setAccessControlAllowMethods(allowMethods);
                }
                if (preFlightRequest && !allowHeaders.isEmpty()) {
                    responseHeaders.setAccessControlAllowHeaders(allowHeaders);
                }
                if (!CollectionUtils.isEmpty(config.getExposedHeaders())) {
                    responseHeaders.setAccessControlExposeHeaders(config.getExposedHeaders());
                }
                if (Boolean.TRUE.equals(config.getAllowCredentials())) {
                    responseHeaders.setAccessControlAllowCredentials(true);
                }
                if (Boolean.TRUE.equals(config.getAllowPrivateNetwork()) && Boolean.parseBoolean(request.getHeaders().getFirst("Access-Control-Request-Private-Network"))) {
                    responseHeaders.set("Access-Control-Allow-Private-Network", Boolean.toString(true));
                }
                if (preFlightRequest && config.getMaxAge() != null) {
                    responseHeaders.setAccessControlMaxAge(config.getMaxAge());
                }
                response.flush();
                return true;
            }
        }
    }
}

参考

Spring Security实战
spring跨域的几种方式

GitHub 加速计划 / js / json

41.72 K

6.61 K

下载

适用于现代 C++ 的 JSON。

最近提交(Master分支：1 个月前 )

960b763e 4 个月前

8c391e04 7 个月前

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m