SpringBoot---CROS 跨域请求

最新推荐文章于 2024-03-28 06:43:41 发布

浅瞳夜未

最新推荐文章于 2024-03-28 06:43:41 发布

阅读量270

点赞数 2

分类专栏： SpringBoot---CROS 跨域请求文章标签： SpringBoot---CROS 跨域请求

本文链接：https://blog.csdn.net/lvhaoguang0/article/details/83268453

版权

SpringBoot---CROS 跨域请求专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、Web 开发经常会遇到跨域问题，解决方案有：jsonp，iframe,CORS 等等 CORS 与 JSONP 相比
1、 JSONP 只能实现 GET 请求，而 CORS 支持所有类型的 HTTP 请求。
2、使用 CORS，开发者可以使用普通的 XMLHttpRequest 发起请求和获得数据，比起 JSONP 有更好的
错误处理。
3、 JSONP 主要被老的浏览器支持，它们往往不支持 CORS，而绝大多数现代浏览器都已经支持了 CORS

浏览器支持情况
Chrome 3+
Firefox 3.5+
Opera 12+
Safari 4+
Internet Explorer 8+

二、在 spring MVC 中可以配置全局的规则，也可以使用@CrossOrigin 注解进行细粒度的配置。

全局配置：
@Configuration
public class CustomCorsConfiguration {

@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurerAdapter() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/**").allowedOrigins("http://localhost:8080");
}
};
}
}

或者是
/**
* 全局设置
*
* @author wujing
*/
@Configuration
public class CustomCorsConfiguration2 extends WebMvcConfigurerAdapter {

@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/**").allowedOrigins("http://localhost:8888");
}
}

定义方法：
/**
* @author wujing
*/
@RestController
@RequestMapping("/api")
public class ApiController {

@RequestMapping(value = "/get")
public HashMap<String, Object> get(@RequestParam String name) {
HashMap<String, Object> map = new HashMap<String, Object>();
map.put("title", "hello world");
map.put("name", name);
return map;
}
}

测试 js：
$.ajax({
url: "http://localhost:8081/api/get",
type: "POST",
data: {
name: "测试"
},
success: function(data, status, xhr) {
console.log(data);
alert(data.name);
}
});

细粒度配置

/**
* @author wujing
*/
@RestController
@RequestMapping(value = "/api", method = RequestMethod.POST)
public class ApiController {
@CrossOrigin(origins = "http://localhost:8888")
@RequestMapping(value = "/get")
public HashMap<String, Object> get(@RequestParam String name) {
HashMap<String, Object> map = new HashMap<String, Object>();
map.put("title", "hello world");
map.put("name", name);
return map;
}
}

使用两个SpringBoot项目完成完成跨越请求。在SpringBoot-demo-10-1项目中完成向http://localhost:8888/api/get(SpringBoot-demo-11-1)发送请求

index.ftl代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <title>Spring Boot Demo - FreeMarker</title>
    <link href="/css/index.css"/>
<#--<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>-->
    <script type="text/javascript" src="/webjars/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<center>
    <h1>首页</h1>
    <img src="/images/logo.png" />
    <h1 id="title">${title}</h1>
</center>

<script>
    $(function(){
        $('#title').click(function(){
            $.ajax({
                url: "http://localhost:8080/api/get",
                type: "POST",
                data: {
                    name: "测试"
                },
                success: function(data, status, xhr) {
                    console.log(data);
                    alert(data.name);
                }
            });
        });
    })
</script>
</body>
</html>

SpringBoot-demo-11-1 ApiControlle如下：

package com.nyist.demo.controller;


import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;

     /**
      * @author wujing
      */
     @RestController
     @RequestMapping("/api")
     public class ApiController {

      @RequestMapping(value = "/get")
      public HashMap<String, Object> get(@RequestParam String name) {
       HashMap<String, Object> map = new HashMap<String, Object>();
       map.put("title", "hello world");
       map.put("name", name);
       System.out.println("******************************");
       System.out.println("*                            *");
       System.out.println("******************************");
       return map;
      }
}

跨域请求配置java代码：

package com.nyist.demo.utils.configuration;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class CustomCorsConfiguration { 
  
     @Bean
     public WebMvcConfigurer corsConfigurer() {
      return new WebMvcConfigurerAdapter() {
       @Override
       public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**").allowedOrigins("http://localhost:8888");
       }
      };
     }
}

ps：SpringBoot-demo-10-1 启动的端口为8888 SpringBoot-demo-11-1启动的端口为8080，我们访问http://localhost:8888/web/index (即可fang访问到/templates/index.ftl) 结果如下：

在SpringBoot-demo-11-1控制台下看到的结果如下：

浅瞳夜未

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot---CROS 跨域请求

一、Web 开发经常会遇到跨域问题，解决方案有：jsonp，iframe,CORS 等等 CORS 与 JSONP 相比 1、 JSONP 只能实现 GET 请求，而 CORS 支持所有类型的 HTTP 请求。 2、使用 CORS，开发者可以使用普通的 XMLHttpRequest 发起请求和获得数据，比起 JSONP 有更好的错误处理。 3、 JSONP 主要被老的浏览器支持，它们...
复制链接

扫一扫