这篇文章主要介绍“怎么搭建前后端跨域传递cookie环境”，在日常操作中，相信很多人在怎么搭建前后端跨域传递cookie环境问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么搭建前后端跨域传递cookie环境”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
后端
新建maven项目
pom.xml
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.1.6.RELEASE</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>com.example</groupId> <artifactId>test-cors</artifactId> <version>0.0.1-SNAPSHOT</version> <name>test-cors</name> <description>Demo project for Spring Boot</description> <properties> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project>
应用启动类
package com.example.testcors;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class TestCorsApplication {
public static void main(String[] args) {
SpringApplication.run(TestCorsApplication.class, args);
}
}
控制器
package com.example.testcors;
import org.springframework.web.bind.annotation.CookieValue;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("hello1")
public class CorsController {
@GetMapping("hello2")
public String testController(
@CookieValue(name = "testcookie") String testCookie
) {
return testCookie;
}
}
配置类
package com.example.testcors;
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 WebMvcConfiguration implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowCredentials(true)
.allowedMethods("*")
.allowedOrigins("*")
.allowedHeaders("*");
}
}
另建项目
前端
html文件
将jquery文件放入同目录下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Page Index</title>
</head>
<body>
<h3>前台系统</h3>
<p id="info"></p>
</body>
<script src="jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
// $.cookie('testcookie','test-value');
// console.log( $.cookie('testcookie'));
$.ajax({
url: 'http://test.testcors.com:8080/hello1/hello2',
type: "GET",
crossDomain: true,
xhrFields: {
withCredentials: true
},
success: function (data) {
$("#info").html("跨域访问成功:" + data);
},
error: function (data) {
$("#info").html("跨域失败!!");
},
})
</script>
</html>
本地hosts配置
添加一行
127.0.0.1 test.testcors.com
浏览器使用cookie相关插件添加cookie
域名为.testcors.com
名为 testcookie
值为任意值
到此，关于“怎么搭建前后端跨域传递cookie环境”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注本站网站，小编会继续努力为大家带来更多实用的文章！
