使用SpringMVC为例子解决跨域 cors

最新推荐文章于 2023-04-17 17:51:46 发布

贫僧法号能忍

最新推荐文章于 2023-04-17 17:51:46 发布

阅读量223

点赞数 2

分类专栏：编程文章标签： SpringMVC Java cros HTTPS HTTP

本文链接：https://blog.csdn.net/wuyou_1997/article/details/103198751

版权

编程专栏收录该内容

3 篇文章 0 订阅

订阅专栏

解决跨域的方案

jsonp 方式垃圾中的战斗机
nginx 代理方式
Java服务端允许跨域 推荐方式
nginx跨域与服务端跨域只选择一个俩个一起好像会有问题。

什么情况下会出现跨域问题

不是同一个域名列：baidu.com、alibaba.com
是同一个域名但是不同端口列：baidu.com:9100、baidu.com:9200
同一个域名但是二级域名不同列：www.baidu.com、api.baidu.com
不是同一个协议列如：http、https

跨域各种参数详解

Access-Control-Allow-Origin："*" 表示任意都可以跨域但是：不可以携带cooke,如果想要携带cooke需要指定具体域名。
Access-Control-Allow-Credentials：“false” true允许携带cooke、 false不允许携带cooke，默认是false
Content-Type:text/html;charset=utf-8

简单请求只需要上面的三个条件仅仅支持GET、POST、？？、这个我忘记了

特殊请求还需要添加两个头例如：restful风格PUT、DELTE、…等等

Access-Control-Request-Method:"*" * 表示接受任意类型的请求方式
Access-Control-Request-Headers: 允许携带的头
Access-Control-Max-Age: 本次许可的有效时长，解释一下为什么会有这个，这个是特殊请求在真实请求之前会发送一个预检请求预检请求通过才会发送真实的请求，这个时长是在多长时间内不需要进行第二次预检直接发送真实请求

想要操作coole必须满足以下3个条件

服务器的响应头中需要携带Access-Control-Allow-Credentials并且为true
浏览器发起的ajax需要指定withCredentials为true
响应头中的Access-Control-Allow-Origin一定不能为*，必须指定域名

上代码

这里使用SpringMVC配置一个跨域拦截器。

package com.wuyou.cors.filter;

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 java.util.Arrays;

nfiguration
public class CorsFilterConfig {
    @Bean
    public CorsFilter corsFilter() {
        //初始化配置对象
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //设置允许跨域的域名，可以设置多个 。*代表所有域名，如果要写代cooke一定不能设置* 一定要加HTTP或者HTTPS 仔细看我写的列子
        corsConfiguration.setAllowedOrigins(Arrays.asList("http://www.aaa.com:8848","https://www.baidu.com", "https://www.alibaba.com",));
        //允许使用cooke
        corsConfiguration.setAllowCredentials(true);
        //允许任意请求方式访问
        corsConfiguration.addAllowedMethod("*");
        //允许携带任意头信息
        corsConfiguration.addAllowedHeader("*");
        //初始化配置源对象
        UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        //这里是拦截所有请求，校验是否允许跨域
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button id="GET">GET</button>
		<button id="PUT">PUT</button>
		<button id="POST">POST</button>
		<button id="DELETE">DELETE</button>
	</body>
	<script>
		var url="http://www.bbb.com:8080/cors/1"
		$(function(){
			$("#GET").click(function(){
				console.log("GET");
				$.ajax({
				    url:url,    //请求的url地址
				    dataType:"json",   //返回格式为json
				    type:"GET",   //请求方式
				});
			});
			$("#POST").click(function(){
				console.log("POST");
				$.ajax({
				    url:url,    //请求的url地址
				    dataType:"json",   //返回格式为json
				    type:"POST",   //请求方式
				});
			});
			$("#PUT").click(function(){
				console.log("PUT");
				$.ajax({
				    url:url,    //请求的url地址
				    dataType:"json",   //返回格式为json
				    type:"PUT",   //请求方式
				});
			});
			$("#DELETE").click(function(){
				console.log("DELETE");
				$.ajax({
				    url:url,    //请求的url地址
				    dataType:"json",   //返回格式为json
				    type:"DELETE",   //请求方式
				});
			});
		});
	</script>
</html>

在没有跨域之前

在这里插入图片描述

使用过滤器跨域之后

在这里插入图片描述

贫僧法号能忍

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用SpringMVC为例子解决跨域 cors

解决跨域的方案jsonp 方式垃圾中的战斗机nginx 代理方式Java服务端允许跨域推荐方式什么情况下会出现跨域问题不是同一个域名          列：baidu.com、alibaba.com是同一个域名但是不同端口     列：baidu.com:9...
复制链接

扫一扫