什么是同源？

同源是指资源地址的 "协议 + 域名 + 端⼝" 三者都相同，即使两个不同域名指向了同⼀IP地址，也会被判断为非同源。这个其实是浏览器的一种安全机制，用于限制一个网页中的网络请求仅能够访问来自同一源（域名、协议和端口号均相同）的资源，主要目的是防止恶意网站通过脚本窃取其他网站的敏感数据，保障用户的隐私和安全。

什么是跨域？

正因为浏览器的同源政策，当浏览器向不同源的服务器发起请求时，就会产生跨域问题
哪些标签不受浏览器同源策略的限制：

<img>标签
<link>标签
<script>标签

如何解决跨域问题？

一、JSONP

这是一种非常经典的跨域方案，它利用了<script> 标签不受同源策略的限制的特性，实现跨域效果
优点：

实现简单
兼容性好

缺点：

只支持 GET 请求（因为 <script> 标签只能发送 GET 请求）
存在被 XSS 攻击的可能，缺乏安全性保证
需要服务端配合改造

Tips：XSS是跨站脚本攻击的缩写,这是一种网络安全漏洞，攻击者可以通过在用户的浏览器中注入恶意脚本，获取用户的凭据（例如：登录凭据、信用卡信息等），从而进行非法活动。

二、CORS (主流)

CORS（Cross-Origin Resource Sharing）是一个W3C标准，全称“跨域资源共享”，它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
它通过服务器增加一个特殊的Header[Access-Control-Allow-Origin]来告诉客户端跨域的限制，如果浏览器支持CORS、并且判断Origin通过的话，就会允许XMLHttpRequest发起跨域请求。

Tips： W3C：万维网联盟,万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。

三、代理服务器

1、开发环境的跨域问题 (使用webpack代理服务器解决)
同源策略, 是浏览器的安全策略, 服务器与服务器之间, 没有跨域问题! 所以可以利用代理服务器转发请求!

代理服务器相当于客户端和Web服务器之间的另一台服务器，有了它之后，浏览器不是直接到Web服务器去取回网页信息，而是通过向代理服务器发送请求，信号会先送到代理服务器，由代理服务器来取回浏览器所需要的信息并传送给你的浏览器。

配置 devServer 的 proxy 配置项
module.exports = {
  devServer: {
   // 代理配置
    proxy: {
        // 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制
        '/api': {
          target: 'www.baidu.com', // 我们要代理请求的地址
           // 路径重写
          pathRewrite: {
              // 路径重写  localhost:8888/api/login  => www.baidu.com/api/login
              '^/api': '' // 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login 就需要这么做 
          }
      },
    }
  }
}

2、生产环境的跨域问题 (使用 nginx 服务器代理)
反向代理服务器： 在服务器端接收客户端的请求，然后把请求分发给具体的服务器进行处理，然后再将服务器的响应结果反馈给客户端。Nginx就是其中的一种反向服务器软件。
修改配置文件：

location /api  {
  proxy_pass  http://target.com/api/;  
  add_header Access-Control-Allow-Origin *;
}

/api/ 是要跨域访问的接口路径，http://target.com/api/ 是目标服务器的接口地址。当请求到达 Nginx 后，Nginx会将请求代理到目标服务器，同时在响应头中添加 Access-Control-Allow-Origin 信息，允许所有源跨域访问。

浏览器的同源策略? 开发中如何解决跨域?