楔子:
跨域的定义:域名,端口,协议,只要有一个不同,就算跨域。
http://www.123.com/index.html 调用 http://www.123.com/server.php (非跨域)
http://www.123.com/index.html 调用 http://www.456.com/server.php (主域名不同:123/456,跨域)
http://abc.123.com/index.html 调用 http://def.123.com/server.php (子域名不同:abc/def,跨域)
http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php (端口不同:8080/8081,跨域)
http://www.123.com/index.html 调用 https://www.123.com/server.php (协议不同:http/https,跨域)
浏览器限制跨域:浏览器正常发送请求,服务器正常响应(200),但是浏览器不会显示数据
问题背景:
本地搭建了 springboot (8080端口) 后端项目和 react (3000端口)前端项目,想在前端中用axios发get请求调用后端接口
import React, { Component } from 'react'
import Axios from 'axios'
// axios 发送请求
export default class App extends Component {
url = 'http://localhost:8080/books/all';
// 发送请求:在挂载周期中发送
componentDidMount(){
// 获取所有书籍 all
Axios.get(this.url).then((response) => {
console.log(response);
});
}
render() {
return (
<div>
发送 axios 请求
</div>
)
}
}
浏览器报了如下错误:
意思是:cors (“跨域资源共享”(Cross-origin resource sharing)) 阻止了你请求的资源
问题原因:
前后端项目在不同的端口上,出现了跨域问题,被浏览器限制。
解决方法:
1、后端项目中配置一个config文件
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
// 允许跨域请求的地址
registry.addMapping("/**")
// 允许跨域请求的域名
.allowedOriginPatterns("*")
// 允许的请求方法
.allowedMethods("GET","POST","PUT","OPTIONS","DELETE","PATCH")
// 是否允许证书(cookies)
.allowCredentials(true)
// 跨域允许时间
.maxAge(3600);
}
}
注意: 如果设置了 allowCredentials(true) ,则不能使用allowedOrigin("") ,要换成 allowedOriginPatterns(""),否则springboot会报如下错误:
When allowCredentials is true, allowedOrigins cannot contain the special value "*“since that cannot be set on the “Access-Control-Allow-Origin” response header. To allow credentials to a set of origins, list them explicitly or consider using"allowedOriginPatterns” instead.
此方法可行:
2、nginx代理
没调通,待完善  ̄□ ̄||