Spring Boot 解决跨域Cors问题

后端主要代码：（http://localhost:8080/ ）

/*WebCorsConfig.java*/
package com.example.demo.Controller;

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 WebCorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://127.0.0.1:5500")
                .allowedMethods("*") 
                .allowedHeaders("*");
    }
}

/*CorsController.java*/
package com.example.demo.Controller;

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

@RestController
public class CorsController {
    @GetMapping("/getDemo")
    public String Get() {
        return "Get Ok!";
    }

    @PutMapping("/putDemo")
    public String Put() {
        return "Put OK!";
    }
}

前端测试代码：（http://127.0.0.1:5500/）React+axios

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name='viewport'
        content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no' />
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>Hello Cros</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        div {
            text-align: center;
        }

        button {
            margin: 10px;
        }
    </style>
</head>

<body>
    <div id="info"></div>
    <div>
        <button οnclick="getDemo()">getDemo</button>
        <button οnclick="putDemo()">putDemo</button>
    </div>
    <script type="text/babel">
           function getDemo() {
            axios.get('http://localhost:8080/getDemo')
                .then(response => {
                    ReactDOM.render(
                        <div>
                            {response.data}
                        </div>,
                        document.getElementById('info')
                    )
                    console.log(response);
                })
                .catch(error => {
                    console.log(error);
                })
                .finally(() => {
                    // ignore
                });
        }
        function putDemo() {
            axios.put('http://localhost:8080/putDemo', {})
                .then(response => {
                    ReactDOM.render(
                        <div>
                            {response.data}
                        </div>,
                        document.getElementById('info')
                    )
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                })
                .finally(function () {
                    // ignore
                });
        }

    </script>
</body>

</html>

JackieZhengChina

发布了113 篇原创文章 · 获赞 69 · 访问量 30万+

私信关注

Spring Boot 解决跨域Cors问题

猜你喜欢