webstorm 使用 live edit 调试时 加载外部资源出现CORS跨域的解决办法

虽然解决的方法非常非常简单，但是搜遍全网也未能找到解决方案，最后通过一遍遍的试验和摸索得以解决，花费了大量时间成本，所以分享出来，为后来者节约一定时间。

前言

在使用webstorm的过程中，为了可以实现一边写代码一边看效果，自动刷新浏览器，也就是常说的代码热更新，我们可以使用webstorm的debug模式，它集成了live edit插件，帮助我们处理此类问题。

从使用感受上而言，它虽不能媲美vscode中的live server那样更流畅的性能，但在webstorm的环境下，我们几乎找不到别的选择（框架项目除外，这里指的是原生html小项目）。

问题环境

在webstorm中
一个html网页，使用了外网上的css资源<link rel="stylesheet" href="http://at.alicdn.com/t/c/fsfsf.css">
然后右键运行debug，webstorm的控制台会报以下错误：
Access to font at 'http://at.alicdn.com/t/c/fonfsfsff?t=1662715902681' from origin 'http://localhost:63342' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

我们请求的是css资源，居然也出现了跨域问题，这样的问题在webstorm中正常运行是不会出现的，在debug时会出现。

具体原因尚不清楚，也许是webstorm本身debug程序中提供的代理服务器本身的问题。

解决方案

File–Setting

如果本篇博客对你有所帮助，麻烦留下您的点赞哦，谢谢！