同源策略和跨域解决方案

什么是浏览器的同源策略

同源策略的含义：浏览器的同源策略（Same-Origin Policy）是一种安全机制，用于限制一个网页文档或脚本如何与来自不同源的资源进行交互。同源是指两个 URL 的协议、主机和端口号都相同
同源策略的目的是保护用户的隐私和安全。它可以防止恶意网站通过脚本访问其他网站的敏感信息或进行恶意操作。同源策略主要限制以下几个方面的交互：

1. 跨域资源读取：在浏览器中，一个网页只能通过 AJAX、WebSocket 或 Fetch API 等方式来请求同源网站的数据。这意味着脚本无法直接读取来自其他域的数据，以防止恶意网站获取用户的敏感信息。
2. 跨域资源加载：浏览器中的脚本无法直接加载来自其他域的资源，如 JavaScript 文件、CSS 文件或字体文件。这是为了防止恶意脚本篡改其他域的资源或执行恶意代码。
3. 跨域窗口通信：浏览器中的脚本只能与同源窗口进行通信，不能直接操作或获取来自其他域的窗口对象的内容。

同源策略通过限制不同源之间的交互，提高了浏览器的安全性。然而，有时需要在不同源之间进行数据交换，为此引入了一些跨域解决方案，如跨域资源共享（CORS）和跨文档消息传递（PostMessage）。这些解决方案允许在特定条件下进行跨域交互，同时保持了一定的安全性。

如何解决跨域问题

跨域问题是由浏览器的同源策略所引起的，它限制了不同源（协议、域名、端口）之间的资源交互。要解决跨域问题，可以采取以下几种方法：
1、jsonp

jsonp实现原理：主要是利用动态创建script标签请求后端接口地址，然后传递callback参数，后端接收callback，后端经过数据处理，返回callback函数调用的形式，callback中的参数就是json

2、通过代理的方式（只能解决开发环境跨域）

前端代理我在vue中使用那个vue.config.js里面配置一个proxy,里面有个target属性指向跨域链接.修改完重启项目就可以了.实际上就是启动了一个代理服务器.绕开同源策略,在请求的时候,通过代理服务器获取到数据再转给浏览器,cli脚手架proxy代理配置的.

devServer: {
    port: 8000,
    open:true,
    proxy: {
      "/api": {//被代理的别名
        target: "http://localhost:8080",//实际的跨域请求地址
        changeOrigin:true,
        pathRewrite:{
        "^/api":"",//将/api重写为空
      }
    }
  },

3.CORS（Cross-Origin Resource Sharing）

CORS是一种在服务器端配置的解决方案。通过在响应头中添加特定的跨域策略信息，允许浏览器在跨域请求时获取和处理来自其他域的数据。服务器需要设置适当的Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers等响应头来指定允许的跨域访问规则。

4.解决生产环境跨域就是nginx做代理.配置proxy_pass