js跨域，springmvc CORS

2024-05-03 09:58
文章标签 java spring js springmvc 跨域 cors

本文主要是介绍js跨域，springmvc CORS，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

  • 子域名之间互相访问需要跨域
    • 结论放在开头
    • 环境搭建
      • 需求
      • 修改host
      • 安装
      • 本地启动一个testhtml
      • 关于跨域CORS
      • 关键
      • 服务端需要做点工作
        • 结果
      • 参考

子域名之间互相访问需要跨域

结论放在开头：

  1. 服务端必须设置允许跨域
  2. 客户端带cookie需要设置withCredentials
  3. 无论服务端是否允许跨域，该request都会完整执行
  4. options预请求需要设置返回空，不然requestMapping没有支持该方法则出错

环境搭建

需求

首先需要搭建两个环境。一个是提供API的server A，一个是需要跨域访问API的server B。

Server A提供了一个api。完整的请求request是：

https://local.corstest.com.net:8443/contentmain/getDepositsRoomAndRatePlanInfo.json?htid=759&_=1490855801818

Server B有个页面page: 

http://cros.corstest.com.net:3001/test.html

并且这个page需要请求server A的api。

但由于跨域保护，请求失败：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'xxxxx' is therefore not allowed access.

修改host

首先本地配置两个指向127.0.0.1的host，方便互相跨域。

127.0.0.1   local.corstest.com.net 
127.0.0.1   cros.corstest.com.net

启动项目A，方便提供API。
至于项目B，测试跨域只要写个html静态页面即可。那么就写一个test.html，并通过一个工具发布：

browser-sync

安装

npm install -g browser-sync

本地启动一个test.html

browser-sync start --server --files "*.html" --host "cros.corstest.com.net"  --port 3001

关于跨域CORS

ruanyifeng的文章里说浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

其中同时满足一下2种标准即为简单跨域：

1) 请求方法是以下三种方法之一：
HEAD
GET
POST
2）HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

而其他情况，非简单请求是那种对服务器有特殊要求的请求，比如请求方法是 PUT或DELETE，或者Content-Type字段的类型是application/json。非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为”预检”请求（preflight），即options请求。

关键

跨域的关键是浏览器获得服务器的认可，而服务器的认可就是header里的Access-Control-Allow-Origin。浏览器通过比较服务端返回的response中是否包含这个字段，以及包含这个字段的内容是否是当前网址来确定是否跨域。也就是说绕过浏览器是可以不用跨域的。

有个问题，看好多文章并没有指出。
第一点，带cookie问题。浏览器设置withCredentials为true则会带cookie发送给服务端。而服务端设置Access-Control-Allow-Credentials为true则接收，false则不接受。关键是到filter里的时候才会决定是否设置response，那么这时候cookie已经存在request里了吧。（待验证）

验证：server端确实已经接受了cookie，即使设置为false，服务端仍旧接受cookie。而客户端也仍旧可以发送cookie。

第二点，简单跨域中，浏览器的请求直接发送给服务器，服务器返回是否支持跨域（即是否header加origin）, 那么简单跨域究竟是请求了服务端几次？如果是1次，那么如果服务端不支持跨域，即没有设置allow，还会不会继续走下去，会不会继续request得到结果后放入response？就是不论跨域不跨域服务器是否都会执行这个request对应的计算。因为所有的设置header都是给浏览器告知的，和服务端限制无关。（待验证）

验证：即使服务端没有设置允许跨域，当客户端请求过来时，服务端仍旧完整执行了请求并返回，只是客户端没有接收。

服务端需要做点工作

针对上述两种跨域。server A需要写一个filter。

<filter><filter-name>cors</filter-name><filter-class>com.test.filter.CorsFilter</filter-class></filter><filter-mapping><filter-name>cors</filter-name><url-pattern>/*</url-pattern></filter-mapping>
</filter>

Filter:

public class CorsFilter extends OncePerRequestFilter {@Overrideprotected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)throws ServletException, IOException {URL requestURL = new URL(request.getRequestURL().toString());String hostName = requestURL.getHost();String origin = request.getHeader("Origin");int index = hostName.indexOf(".");if(index > -1) {String domainHost = hostName.substring(index, hostName.length());if(!StringUtils.isEmpty(origin) && origin.contains(domainHost)) {response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");response.addHeader("Access-Control-Allow-Origin", origin);response.addHeader("Access-Control-Allow-Credentials", "true");response.setHeader("Access-Control-Max-Age", "3600");response.addHeader("Access-Control-Allow-Headers", "Content-Type, Cookie, " +"Accept-Encoding, User-Agent, " +"Host, Referer, " +"X-Requested-With, Accept, " +"Accept-Language, Cache-Control, Connection");if (request.getHeader("Access-Control-Request-Method") != null && "OPTIONS".equals(request.getMethod())) {// CORS "pre-flight" requestresponse.setStatus(200);return;}}}filterChain.doFilter(request, response);}
}

上述filter是为了同一个domain下，不同子域名可以跨域访问，而其他domain则不可以，因为我们需要共享cookie，所以设置Access-Control-Allow-Credentials为true. 如果设置为false则不接受cookie。

客户端，即server B如果想要发送cookie则需要设置withCredentials为true. 

//原生
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
//jquery
$.ajax({...xhrFields: {withCredentials: true}...
});

注意，针对非简单跨域的时候发送options请求，服务端A需要告诉浏览器是否支持跨域即可，不要往下走了，不然到指定的requestMapping发现不支持这个方法就会很尴尬了，所以直接返回。

下面针对简单跨域和非简单跨域做测试：

<!DOCTYPE html>
<html lang="en"><meta charset="UTF-8"><title>test</title><script src="jquery-1.11.3.js"></script>
</head>
<body><input type="button" value="GET_Default" onclick="testGetDefault()">
<input type="button" value="GET_JSON" onclick="testGetJSON()">
<input type="button" value="POST_Default" onclick="testPostDefault()">
<input type="button" value="POST_JSON" onclick="testPostJson()">
<input type="button" value="PUT" onclick="testPUT()"><script>var getUrl = "https://local.corstest.com.net:8443/contentmain/getDepositsRoomAndRatePlanInfo.json?htid=759";var postUrl = "https://local.corstest.com.net:8443/contentmain/saveReservationDeposits.json?htid=759";function testGetDefault(){sendAjax("GET",getUrl, "json", "application/x-www-form-urlencoded");}function testGetJSON(){sendAjax("GET",getUrl, "json", "application/json; charset=utf-8");}function testPostDefault(){sendAjax("POST",postUrl, "json", "application/x-www-form-urlencoded");}function testPostJson(){sendAjax("POST",postUrl, "json", "application/json; charset=utf-8");}function testPUT(){sendAjax("PUT",postUrl, "json", "application/json; charset=utf-8");}function sendAjax(type, url, dataType, contentType){$.ajax( { type: type,url:  url,xhrFields: {withCredentials: true},dataType : dataType, // accept typecontentType: contentType,  //request type, default is application/x-www-form-urlencodedsuccess: function(result){console.log(result);},error: function (xhr) {console.log(xhr);}});}</script>
</body>
</html>
结果：

GET default:
只发送一个正常的get请求。

GET json:

先发送一个options如下：

General:
Request URL:https://local.corstest.com.net:8443/contentmain/getDepositsRoomAndRatePlanInfo.json?htid=759
Request Method:OPTIONS
Status Code:200 OK
Remote Address:127.0.0.1:8443Response Headers:
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:Content-Type, Cookie, Accept-Encoding, User-Agent, Host, Referer, X-Requested-With, Accept, Accept-Language, Cache-Control, Connection
Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin:http://cros.corstest.com.net:3001
Content-Length:0
Date:Thu, 30 Mar 2017 12:47:44 GMT
Server:Apache-Coyote/1.1Request Headers:
Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:zh-CN,zh;q=0.8
Access-Control-Request-Headers:content-type
Access-Control-Request-Method:GET
Connection:keep-alive
Host:local.corstest.com.net:8443
Origin:http://cros.corstest.com.net:3001
Referer:http://cros.corstest.com.net:3001/test.html
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

然后再发送正常的Get请求。

post default:
正常发送请求。

post json: 先发送一个options请求。然后再发送正常的请求。
其他同理，总之，非简单跨域会多发一次options请求来确认是否支持跨域，这时候服务端一定要返回支持跨域，并且直接返回即可。

参考：

  • 跨域资源共享 CORS 详解

这篇关于js跨域，springmvc CORS的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/956463。

相关文章

Spring Security常见问题及解决方案

Spring Security常见问题及解决方案

《SpringSecurity常见问题及解决方案》SpringSecurity是Spring生态的安全框架,提供认证、授权及攻击防护,支持JWT、OAuth2集成,适用于保护Spring应用,需配置... 目录Spring Security 简介Spring Security 核心概念1. ​Securit
阅读更多...
SpringBoot+EasyPOI轻松实现Excel和Word导出PDF

SpringBoot+EasyPOI轻松实现Excel和Word导出PDF

《SpringBoot+EasyPOI轻松实现Excel和Word导出PDF》在企业级开发中,将Excel和Word文档导出为PDF是常见需求,本文将结合​​EasyPOI和​​Aspose系列工具实... 目录一、环境准备与依赖配置1.1 方案选型1.2 依赖配置（商业库方案）二、Excel 导出 PDF
阅读更多...
SpringBoot改造MCP服务器的详细说明(StreamableHTTP 类型)

SpringBoot改造MCP服务器的详细说明(StreamableHTTP 类型)

《SpringBoot改造MCP服务器的详细说明(StreamableHTTP类型)》本文介绍了SpringBoot如何实现MCPStreamableHTTP服务器,并且使用CherryStudio... 目录SpringBoot改造MCP服务器（StreamableHTTP）1 项目说明2 使用说明2.1
阅读更多...
spring中的@MapperScan注解属性解析

spring中的@MapperScan注解属性解析

《spring中的@MapperScan注解属性解析》@MapperScan是Spring集成MyBatis时自动扫描Mapper接口的注解,简化配置并支持多数据源,通过属性控制扫描路径和过滤条件,利... 目录一、核心功能与作用二、注解属性解析三、底层实现原理四、使用场景与最佳实践五、注意事项与常见问题六
阅读更多...
Spring的RedisTemplate的json反序列泛型丢失问题解决

Spring的RedisTemplate的json反序列泛型丢失问题解决

《Spring的RedisTemplate的json反序列泛型丢失问题解决》本文主要介绍了SpringRedisTemplate中使用JSON序列化时泛型信息丢失的问题及其提出三种解决方案,可以根据性... 目录背景解决方案方案一方案二方案三总结背景在使用RedisTemplate操作redis时我们针对
阅读更多...
Java中Arrays类和Collections类常用方法示例详解

Java中Arrays类和Collections类常用方法示例详解

《Java中Arrays类和Collections类常用方法示例详解》本文总结了Java中Arrays和Collections类的常用方法,涵盖数组填充、排序、搜索、复制、列表转换等操作,帮助开发者高... 目录Arrays.fill()相关用法Arrays.toString()Arrays.sort()A
阅读更多...
Spring Boot Maven 插件如何构建可执行 JAR 的核心配置

Spring Boot Maven 插件如何构建可执行 JAR 的核心配置

《SpringBootMaven插件如何构建可执行JAR的核心配置》SpringBoot核心Maven插件,用于生成可执行JAR/WAR,内置服务器简化部署,支持热部署、多环境配置及依赖管理... 目录前言一、插件的核心功能与目标1.1 插件的定位1.2 插件的 Goals（目标）1.3 插件定位1.4 核
阅读更多...
如何使用Lombok进行spring 注入

如何使用Lombok进行spring 注入

《如何使用Lombok进行spring注入》本文介绍如何用Lombok简化Spring注入,推荐优先使用setter注入,通过注解自动生成getter/setter及构造器,减少冗余代码,提升开发效... Lombok为了开发环境简化代码，好处不用多说。spring 注入方式为2种，构造器注入和setter
阅读更多...
使用zip4j实现Java中的ZIP文件加密压缩的操作方法

使用zip4j实现Java中的ZIP文件加密压缩的操作方法

《使用zip4j实现Java中的ZIP文件加密压缩的操作方法》本文介绍如何通过Maven集成zip4j1.3.2库创建带密码保护的ZIP文件,涵盖依赖配置、代码示例及加密原理,确保数据安全性,感兴趣的... 目录1. zip4j库介绍和版本1.1 zip4j库概述1.2 zip4j的版本演变1.3 zip4
阅读更多...
Java堆转储文件之1.6G大文件处理完整指南

Java堆转储文件之1.6G大文件处理完整指南

《Java堆转储文件之1.6G大文件处理完整指南》堆转储文件是优化、分析内存消耗的重要工具,：本文主要介绍Java堆转储文件之1.6G大文件处理的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言文件为什么这么大？如何处理这个文件？分析文件内容（推荐）删除文件（如果不需要）查看错误来源如何避
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2