這篇文章主要介紹“怎么搭建前后端跨域傳遞cookie環(huán)境”，在日常操作中，相信很多人在怎么搭建前后端跨域傳遞cookie環(huán)境問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么搭建前后端跨域傳遞cookie環(huán)境”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

成都創(chuàng)新互聯(lián)公司是一家專注于網站設計制作、網站制作與策劃設計,任丘網站建設哪家好?成都創(chuàng)新互聯(lián)公司做網站,專注于網站建設10年,網設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:任丘等地區(qū)。任丘做網站價格咨詢: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文件放入同目錄下

    
    


前臺系統(tǒng)




    // $.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環(huán)境”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
新聞標題：怎么搭建前后端跨域傳遞cookie環(huán)境
URL網址：http://weahome.cn/article/jipepg.html