跨域资源共享的弊端、以及Img标签携带Cookie

1. 跨域资源共享的弊端就是，像img这样的标签请求时没办法携带Cookie。比如图片做了权限校验需要Cookie。

• 同源请求和 Cookie：

  • 当页面上的 <img> 标签的 src 属性指向同源的服务器时，即和当前页面具有相同的协议、域名和端口，浏览器会默认携带页面的 Cookie 或其他凭证信息。这是因为同源请求在浏览器的安全模型中被认为是安全的，浏览器会允许同源的资源共享信息。

• 跨域请求和 Cookie：

  • 当 <img> 标签的 src 属性指向一个不同源（跨域）的服务器时，浏览器会遵循同源策略的规定。同源策略限制了在不同源之间共享资源和信息的能力，其中一个重要的限制就是不能自动发送跨域请求中的凭证信息（如 Cookie）到目标服务器。
  • 即使在跨域请求的响应中设置了 Access-Control-Allow-Credentials: true，浏览器也不会在 <img> 标签的请求中自动发送 Cookie。这是因为跨域请求的安全性和隐私问题，浏览器会阻止敏感信息的泄露。

2. 解决办法

• 代理服务器 在代理服务器进行转发，因为服务器不受跨域的限制。且代理服务器和域名是同源请求，默认情况下会携带上Cookie。
• 代理服务器 不管你是Fetch发起的请求还是img标签发起的请求，你都可以在代理服务器里面对他进行拦截，并且可以对请求头统一修改request headers。比如我需要缓存所有的请求图片。

server.use('/blog', createProxyMiddleware({
        target: ,
        changeOrigin: true,
        pathRewrite: {
            '^/blog': '/blog',
        },
        onProxyRes: (proxyRes, req, res) => {
            // 添加缓存头
            if (req.url?.includes('blog/image')) {
                res.setHeader('Cache-Control', 'public, max-age=2590000');
            }
        }
    }))