浏览器同源策略

什么是同源策略？

同源策略是浏览器的一种安全机制，用来限制来自不同源的文档之间的相互操作。同源策略的三要素包括协议、域名（或IP地址）和端口号，只有当这三个要素全部相同时，两个URL才属于同一个源。

什么作用？

1. 保护用户隐私：通过限制不同源之间的数据访问，同源策略可以保护用户的敏感信息不被恶意网站或脚本窃取。
2. 防止跨站脚本攻击。
3. 防止数据泄漏。

如何解决跨域问题？

作为前端工程师，面对同源策略的限制，有几种常见的解决方案可以实现跨域请求或操作。以下是一些常用的方法：

1. JSONP (JSON with Padding)

JSONP 是一种利用 <script> 标签的跨域请求方式。由于 <script> 标签的 src 属性不受同源策略的限制，所以可以通过动态创建 <script> 标签并设置其 src 属性为跨域请求的 URL 来实现跨域数据访问。
服务器端需要将响应的数据以函数调用的形式返回，客户端通过定义对应的回调函数来接收数据。
JSONP的缺点：
● 只支持get方法
● 不安全，可能遭受XSS攻击

2. CORS (Cross-Origin Resource Sharing)

CORS 是一个 W3C 标准，跨域资源共享(CORS) 是一种机制。它定义了一种浏览器和服务器交互的方式来确定是否允许跨源请求。
服务器端需要在响应头中添加相应的 CORS 字段来指定哪些源可以访问该资源。
客户端（浏览器）会根据这些字段来决定是否允许跨域请求。
nginx代理跨域，实质和CORS跨域原理一样，通过配置文件设置请求响应头。

3. postMessage

如果两个页面或窗口之间需要通信，并且它们不是同源的，可以使用 window.postMessage 方法来实现。
该方法允许在一个窗口或页面中向另一个窗口或页面发送数据，并且可以通过事件监听器来接收响应。

4. WebSockets

WebSockets 是一种在单个 TCP 连接上进行全双工通信的协议。
它允许服务器主动向客户端推送数据，并且不受同源策略的限制。
使用 WebSockets 可以实现实时的跨域通信，但需要服务器端的支持

5. vue 框架中的跨域
   webpack.config.js部分配置：

module.exports = {
    devServer: {
        historyApiFallback: true,
        proxy: [{
            context: '/login',
            target: 'http://www.domain2.com:8080',  // 代理跨域目标接口
            changeOrigin: true,
            secure: false,  // 当代理某些https服务报错时用
            cookieDomainRewrite: 'www.domain1.com'  // 可以为false，表示不修改
        }],
        noInfo: true
    }
}```