这篇文章主要介绍“怎么搭建前后端跨域传递cookie环境”，在日常操作中，相信很多人在怎么搭建前后端跨域传递cookie环境问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么搭建前后端跨域传递cookie环境”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
成都创新互联公司是一家专注于网站设计制作、网站制作与策划设计,任丘网站建设哪家好?成都创新互联公司做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:任丘等地区。任丘做网站价格咨询:18980820575
后端
新建maven项目
pom.xml
4.0.0
org.springframework.boot
spring-boot-starter-parent
2.1.6.RELEASE
com.example
test-cors
0.0.1-SNAPSHOT
test-cors
Demo project for Spring Boot
1.8
org.springframework.boot
spring-boot-starter-web
org.springframework.boot
spring-boot-starter-test
test
org.springframework.boot
spring-boot-maven-plugin
应用启动类
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文件放入同目录下
Page Index
前台系统
// $.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("跨域失败!!");
},
})
