SpringBoot-两种常用方法解决CORS跨域问题 Leonan

最新推荐文章于 2024-06-26 22:31:24 发布

稀释纯白色

最新推荐文章于 2024-06-26 22:31:24 发布

阅读量546

点赞数

分类专栏： SpringBoot 文章标签： java spring web

本文链接：https://blog.csdn.net/Forexer/article/details/106269221

版权

SpringBoot 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.创建一个名 leonan-cross-provider 的项目提供服务。application.yml文件配置端口

server:
  port: 8080

编写LeonanController 类

package org.leonan.leonancrossprovider.controller;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * @author Leonan
 * @date 2020/5/21 20:56
 */
@RestController
//@CrossOrigin(value = "http://localhost:8081")
public class LeonanController {

    //@CrossOrigin(value = "http://localhost:8081")
    @GetMapping("/gain")
    public String giveGirlfriend(){
        return "GiveGirlfriend";
    }
    //@CrossOrigin(value = "http://localhost:8081")
    @PostMapping("/gain")
    public String providerGirlfriend(){
        return "ProviderGirlfriend";
    }

}

2.创建一个名 leonan-cross-consumer 的项目消费服务。application.yml文件配置端口

server:
  port: 8081

在自动生成的resources/static目录下创建一个名 get_girlfriend.html 的文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取女票</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

    <div id="single"></div>
    <input type="button" onclick="getGrilfriend()" value="get">
    <input type="button" onclick="getGrilfriend2()" value="gain">
    <script>
        function getGrilfriend() {
            $.get('http://localhost:8080/gain', function (data) {
                $("#single").html(data);
            });
        }

        function getGrilfriend2() {
            $.post('http://localhost:8080/gain', function (data) {
                $("#single").html(data);
            });
        }
    </script>

</body>
</html>

注：没有网络的朋友自己引入本地 jquery.js 文件，我使用的网络引入
3.启动两个服务，浏览器访问写好的网页

http://localhost:8081/get_girlfriend.html

点击get、gain按钮控制台会报如下错误
在这里插入图片描述因为跨域请求被同源策略限制，所以报错
方法一：
下面我们将giveGirlfriend()、providerGirlfriend()方法上的注释的注解放开

@CrossOrigin(value = "http://localhost:8081")

在这里插入图片描述
重新运行 leonan-cross-provider 服务，再次点击按钮就可以获取到你心仪的女盆友了

或者将注解@CrossOrigin加到controller类上，就不需要在每个方法上添加了

方法二：
在 leonan-cross-provider 项目下创建MyWebMvcConfigurer类实现WebMvcConfigurer接口，重写addCorsMappings()方法。别忘添加@Configuration注解（这种方法就不需要@CrossOrigin注解了，别忘注释掉哦，不过不注释也没事，但我是严谨的程序员“单身汪”）

package org.leonan.leonancrossprovider.config;

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

/**
 * @author Leonan
 * @date 2020/5/21 22:08
 */
@Configuration
public class MyWebMvcConfigurer implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {

        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8081") //接受此地址域的访问请求
                //.allowedOrigins("*") //接受所有地址域的访问请求，结果你懂得，女朋友不够发了
                .allowedMethods("*")
                .allowedHeaders("*");

    }

}