目录

1.同源策略

2.解决方案(后端)

(1)在后端方法添加@CrossOrigin

(2)添加CORS过滤器

(3)实现WebMvcConfigure接口，重写addCorsMappings方法

3.解决方案(前端)

(1)前端配置代理

---

1.同源策略

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

要想满足同源策略，域名，协议，端口号必须相同。

同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。

2.解决方案(后端)

使用CORS（跨域资源共享）策略来解决跨域问题。

(1)在后端方法添加@CrossOrigin

使用这种解决方法，需要在涉及到跨域的接口都需要添加此注解，比较麻烦。

(2)添加CORS过滤器

(3)实现WebMvcConfigure接口，重写addCorsMappings方法

3.解决方案(前端)

(1)前端配置代理

  devServer: {
    host: '0.0.0.0',
    port: port,
    open: true,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8080`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    disableHostCheck: true
  },

通过proxy将前端的请求进行代理，转发都后端的8080端口。