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 {@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;@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/babel-standalone@6.15.0/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 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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/285231.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！