关于我对前端跨域的理解

1.为什么要跨域？
现代浏览器出于安全的考虑，都会区遵守同源策略，同源的意思是两个地址的协议、域名、端口号都相同的情况下，才叫同源。这个时候两个地址才跨域互相访问cookie、localStorage、sessionStorge、发送ajax请求，如果三者有一个不同，就是不同源，这时候再去访问这些资源就叫跨域。
[备注]：1.端口和协议的不同，只能通过后台来解决
2.localhost和127.0.0.1虽然都指向本机，但也属于跨域
3.请求不会携带cookie时，也就没有了跨域显示，如：1.js、css、image等静态文件
2.form表单提交
2.跨域的方式
**a. jsonp(现在少了)**缺点：只支持GET请求

原理如下：
//

访问资源不会报跨域错误
b. cors
非简单请求：
在正式的跨域请求前，发送一个OPTIONS请求去询问服务器是否接受接下来的跨域请求，携带如下header
Origin:发起请求原来的域
Access-Control-Request-Method:将要发起的跨域请求方式(GET/POST/…)
Access-Control-Request-Headers:将要发起的跨域请求中包含的请求头字段
服务器在返回中增加如下header来表明是否允许这个跨域请求。浏览器收到后进行检查如果不符合要求则不会发起后续请求
Access-Control-Allow-Origin:允许哪些域来访问(*表示所有域的请求)
Access-Control-Allow-Methods:允许哪些请求方式
Access-Control-Allow-Headers:允许哪些请求头字段
Access-Control-Allow-Credentials:是否允许携带Cookie
简单请求：
每次都要发送二次请求是不是很麻烦？所以做了优化
当请求方法HEAD、GET、POST并且请求头只有如下几个时，被定义为简单请求
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type
简单请求会在请求中加入Origin头，直接发请求，不会先询问了，返回相应的Header即可。在响应中检查Access-Control-Allow-Origin，不符合要求就报错
1.Spring支持跨域 利用Filter配置

c. vue的proxy(配置vue.config.js)
使用proxy对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。
const p = new Proxy(target, handler)
请求地址：axios.get(‘system/api/index/data.json’).then(data => console.log(data))
配置：module.exports = {
devServer: {
host: “0.0.0.0”,
port: 8080,
// 配置跨域
proxy: {
“/system/api/”: {
// 目标路径
target: “https://www.bilibili.com/”,
// 允许跨域
changeOrigin: true,
// 路径重写
pathRewrite: {
“^/eUrbanGIS”: “/eUrbanGIS”
}
},
“/data/api/”: {
target: “https://www.bilibili.com/”,
changeOrigin: true
}
}
}
}

原理：

1.将域名发送给本地服务器(localhost:8080)
2.再由本地的服务器去请求真正的服务器
3.因为请求是从服务端发出的，所以就不存在跨域问题了
d.(提一嘴就行没人用) 利用iframe等有src属性的标签(原理如同上面备注第三条)(主流都是b，c)
e.document.domain
f.window.postMessage