后端主要代码: (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>