摘要：本文主要介绍了在SpringBoot中使用CORS（跨域源资源共享）实现跨域操作，CORS是以W3C为标准的一份浏览器技术的规范。

项目创建

首先创建两个普通的SpringBoot项目，第一个命名为provider提供服务，第二个命名为consumer消费服务，第一个配置端口为8080，第二个配置配置为8081。

首先在provider上创建一个HelloController，提供两个hello接口，一个get，一个put。

package com.example.cors1;

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

/**
 * @author: WJZheng
 * @date: 2020/3/17 08:30
 * @description:
 */

@RestController
@CrossOrigin(origins = "http://localhost:8081") //该注释允许来自8081域的请求，该注释可以加在类上，也可以加在方法上
public class HelloConroller {
    
    @GetMapping("/hello")
    public String hello() {
        return "hello cors1";
    }

    @PutMapping("/putting")
    public String putting(){
        return "putting";
    }
}

那么如果我们希望进行全局配置呢？我们可以创建一个WebMvcConfig来配置允许访问的域以及请求方法。

package com.example.cors1;

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

/**
 * @author: WJZheng
 * @date: 2020/3/17 10:04
 * @description:
 */
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8081")
                .allowedHeaders("*") //表示允许所有请求头
                .allowedMethods("*") //表示允许所有请求方法
                .maxAge(30 * 1000);
    }
}

然后在costumer中创建一个请求页面indx.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
</head>
<body>
<div id="app"></div>
<input type="button" value="GET" onclick="getData()">
<input type="button" value="PUT" onclick="putData()">
<script>
    function getData() {
        $.get('http://localhost:8080/hello', function (msg) {
           $("#app").html(msg);
        });
    }
    function putData() {
        $.ajax({
            type: 'put',
            url: 'http://localhost:8080/putting',
            success: function (msg) {
                $("#app").html(msg);
            }
        });
    }
</script>
</body>
</html>