vue项目中代理了iframe中的网页，但是该网页是服务端渲染，代理后报404错误找不到资源。

Question

vue项目中代理了iframe中的网页，但是该网页是服务端渲染，代理后报404错误找不到资源。
场景demo展现：
下面是代理写法：

下面是服务端渲染的页面随便引入的资源

下面是代理后报404错误

Answer 1

引自免费微信小程序：皆我百晓生

在Vue项目中使用代理服务器（devServer.proxy）处理iframe中的服务端渲染页面时，出现404错误和MIME类型不匹配的问题，这是因为代理配置可能没有正确处理iframe中静态资源的路径。针对你提供的配置信息，可以尝试如下方式调整：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      // 针对你的场景，可能需要将/api更改为一个能匹配 iframe 中所有资源的正则表达式
      '^/api(.*)': {
        target: 'http://localhost:10001',
        changeOrigin: true,
        secure: false,
        pathRewrite: { // 由于iframe中的资源路径是相对路径，这里无需重写路径
          '^/api': ''
        },
        // 添加以下内容以转发任何非API请求到目标服务器
        onProxyReq(proxyReq, req, res) {
          // 根据实际情况调整req.url以指向正确的资源
          if (!req.url.startsWith('/api')) {
            proxyReq.path = req.url.replace(/^\/[^\/]+\//, '/'); // 去除前端项目的上下文路径
          }
        }
      }
    }
  }
};

上述配置中，我们修改了代理规则以匹配更多的URL，并且在onProxyReq钩子函数中处理了非API的请求。这样，当iframe中加载资源时，如果资源路径不是/api开头的，将会被转发到后端服务器的相应路径。

然而，请注意，根据iframe中资源的实际路径，可能还需要进一步微调onProxyReq里的代码逻辑。同时，确保iframe中的资源引用路径是相对于其自身的HTML文件的，这样才能保证代理转发至正确的目标地址。

另外，对于报错中提及的MIME类型问题，这通常是因为服务端返回的内容类型与预期不符，例如HTML文件作为CSS或JS执行，这种情况下需要检查后端服务器是否正确设置了响应头Content-Type。