解决webpack项目启动后报错：Access to XMLHttpRequest at ‘http://xxx:xxx/sockjs-node/info?t=xxx‘ from origin...

报错：

Access to XMLHttpRequest at 'http://xxx:xxx/sockjs-node/info?t=xxx' from origin 'http://xxx:xxx' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `private`.

原因：

首先说一下，webpack默认会启用热更新，调用sockjs，作用是保证我们在改完代码重新编译之后，能够通知浏览器重新加载变更结果，不需要手动刷新。

出现上面的错误可能是devServer被nginx或其他代理服务器代理，浏览器访问的是代理服务器地址，如example.com，而热更新脚本sockjs猜测要连接的地址是devServer的本地网络地址，如192.168.16.100，从而出现跨域问题。

解决方法：

在webpack的配置文件中devServer加上如下配置：

module.exports = {
  //...
  devServer: {
    public: 'example.com:80'
  }
};

example.com换成代理服务器的ip或域名。如果是uniapp项目，在manifest.json中配置。

以下是webpack官网的解释：

翻译：当使用内联模式并且代理开发服务器时，内联客户端脚本并不总是知道连接到哪里。它会尝试根据window.location猜测服务器的URL，但是如果失败了，你就需要使用这个。 例如，dev-server由nginx代理，在myapp上可用。

如果需要关闭热更新，作如下配置：

module.exports = {
  //...
  devServer: {
    inline: false
  }
};

但是修改代码后需要手动刷新页面。

网上大部分解决方案是修改sockjs源码，属于治标不治本，而且会使热更新失效：

try {
  //  self.xhr.send(payload); 把这里注掉
  } catch (e) {
    self.emit('finish', 0, '');
    self._cleanup(false);
  }