这篇文章主要介绍“怎么搭建前后端跨域传递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环境”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://my.oschina.net/u/4138283/blog/3068440
