JZTXT

浏览器调试显示被 CORS 策略阻止

发布时间 2023-07-16 17:03:35作者: 雨崩

 

详细报错

indexTESTcopy.html:1 Access to XMLHttpRequest at 'file:///E:/WebServer/xxx' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

 

原因：

 

表明在你的调试环境中，出现了跨域请求的问题。浏览器不允许在本地文件系统（file:///）上进行跨域请求到其他域（E:/WebServer/XXX），这是浏览器的安全策略。

 

解决这个问题有几种方法：

  1. 使用本地开发服务器：

    • 推荐的方法是使用本地开发服务器（如 Node.js 的 Express 或 Python 的 SimpleHTTPServer），这样可以模拟一个HTTP协议的域，避免跨域问题。
    • 安装一个本地开发服务器，并将你的项目部署在该服务器上。然后通过 http://localhost 或 http://127.0.0.1 访问你的项目，而不是使用 file:/// 协议。

  2. 启用浏览器的跨域访问：

    • 另一种临时方法是启用浏览器的跨域访问选项。请注意，这并不是一个安全建议，应仅用于调试和测试目的。
    • 例如，对于 Chrome 浏览器，在快捷方式的目标属性中添加 --allow-file-access-from-files 参数来启用跨域访问。

  3. 部署到相同的域：

    • 将 FileUploadHandler.ashx 文件部署到与你的前端代码相同的域，确保它们都在同一个域名下，这样就不会遇到跨域问题。

请注意，当你在生产环境中部署应用时，跨域问题通常不会存在，因为前端和后端代码通常是通过相同的域名访问的。跨域问题主要出现在开发和调试过程中，因为前端代码在本地开发服务器上运行，而后端代码可能在不同的域或本地文件系统上。

 

我的解决办法：

  • 安装一个本地开发服务器，并将你的项目部署在该服务器上。然后通过 http://localhost 或 http://127.0.0.1 访问你的项目，而不是使用 file:/// 协议。
  • 直接在url里输入本地开发的服务器，即可。具体细节可以看 IIS 如何创建虚拟目录。