什么是跨域?
同源策略
说到跨域就要说浏览器同源策略:
三者一个不同都会跨域
例如:http:localhost:9000(前台)
http:localhost:9001(后台) 跨域
浏览器的同源策略:
1.协议(protocol) http https
2.主机(host) www.baidu.....
3.端口号(port) 8088
解决跨域的几种方式
1.CORS(后端) 谁都可以访问
问题:数据不安全
2.JSONP(前端) 利用script 标签的src属性实现跨域
问题:只能get请求
3.Nginx 反向代理 需要配置
4.webpack 可以做代理 实现跨域
webpack代理实现跨域
module.exports = {
// 配置服务器
devServer: {
// 启用压缩,代码占的空间少,在互联网传输快
compress: true,
port: 9000,
host: '127.0.0.1',
hot: true, // 启用热启动。
open: true, // 默认第一次运行时调起浏览器打开项目
// 服务器代理,实现跨域访问接口
proxy: {
'/api': {
target: 'https://music.taihe.com', // 接口地址
ws: true, // 是否启用websockets
changOrigin: true, //允许跨域 Origin源127.0.0.1:9000
pathRewrite: {
'^/api': '/' //请求的时候使用这个/api前缀就可以
}
}
}
}
}
正常调用接口
localhost:9000/user/getSelect
代理之后: localhost:9000/api/user/getSelect
// 把/api替换成空就变成/
pathRewrite: {
'^/api': '/' //把/api替换成空就变成/
}
CORS实现跨域(后台)
在每个Controller上加上@CrossOrigin 注解实现跨域
友情连接 : wh柒八九的: springboot的几种跨域方式.