解决跨域的几种方式

什么是跨域?

同源策略

说到跨域就要说浏览器同源策略：

三者一个不同都会跨域
例如：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的几种跨域方式.