怎么搭建前后端跨域传递cookie环境

这篇文章主要介绍“怎么搭建前后端跨域传递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文件放入同目录下

    
    


前台系统




    // $.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("跨域失败!!");
        },

    })

本地hosts配置

添加一行

127.0.0.1  test.testcors.com

浏览器使用cookie相关插件添加cookie

域名为.testcors.com

名为  testcookie

值为任意值

到此，关于“怎么搭建前后端跨域传递cookie环境”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！