后端主要代码：（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;@Configurationpublic class WebCorsConfig implements WebMvcConfigurer {@Overridepublic 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;@RestControllerpublic 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="/react@16/umd/react.development.js"></script><script src="/react-dom@16/umd/react-dom.development.js"></script><script src="/babel-standalone@6.15.0/babel.min.js"></script><script src="/axios/dist/axios.min.js"></script><style>div {text-align: center;}button {margin: 10px;}</style></head><body><div id="info"></div><div><button onclick="getDemo()">getDemo</button><button onclick="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>
