同源策略
同源
相同协议+相同域名+相同端口
内容
浏览器页面向不同源的服务器发送ajax请求资源时，响应的数据会被浏览器拦截
意义
出于安全性的考虑，防止恶意获取数据
解决方案
JSONP
不使用ajax请求，替换为不受同源策略控制的script标签
缺点
- 只支持get
不常用
Node正向代理
利用服务端请求不会跨域的特性，让接口和当前站点同域。
浏览器页面的请求都发给同源的node代理服务器，根据请求内容的不同转发给不同的服务器，再转发给浏览器
eg Vue-cli 3.x
// vue.config.js 如果没有就新建
module.exports = {
devServer: {
port: 8000,
proxy: {
"/api": {
target: "http://localhost:8080"
}
}
}
};
Nginx反向代理
浏览器页面的请求都发给同源的nginx代理服务器，根据请求内容的不同转发给不同的服务器，再转发给浏览器
server {
listen 80;
server_name local.test;
location /api {
proxy_pass http://localhost:8080;
}
location / {
proxy_pass http://localhost:8000;
}
}
缺点
- 不够灵活，前后端人员需要协商请求路径
CORS
后端添加浏览器页面ip的白名单，浏览器获取http响应头后，判断页面ip是否在白名单中，决定是否拦截响应数据
跨源资源共享（CORS） - HTTP | MDN (mozilla.org)
springboot中的标签@CrossOrigin可以配置
websocket
没有了http头，就不受同源策略的限制