【Azure Developer】浏览器查看本地数据文件时遇见跨域问题(CORS)

简介: 【Azure Developer】浏览器查看本地数据文件时遇见跨域问题(CORS)

问题描述

.Net 应用部署到Azure App Service上后,出现5XX错误后,通过.Net Profiler Trace工具生成报告文件(HTML 加 JSON数据文件),在本地打开,遇见Access to XMLHttpRequest at 'file:///C:/Users/.../failedrequests.json' from origin 'null' has been blocked by CORS policy 问题

Access to XMLHttpRequest at 'file:///C:/Users/.../failedrequests.json' 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-untrusted, https, edge.

reportdata/failedrequests.json:1

Failed to load resource: net::ERR_FAILED

怎么办?怎么办?

 

解决办法

网上寻找到答案,可以禁用浏览器本身的跨域校验来打开数据文件。关键点在于 “ --disable-web-security ” 参数。EdgeChrome 都是一样。

## Edge 浏览器

msedge.exe  --disable-web-security --user-data-dir=<C:\Users\... 本地JSON文件/HTML文件夹路径>

 

## Chrome 浏览器

chrome.exe --disable-web-security --user-data-dir=<C:\Users\... 本地JSON文件/HTML文件夹路径>

 

具体操作步骤

1: 找到Edge 及 Chrome 软件的安装目录 ( msedge.exe  或 chrome.exe 文件所在之Floder)

 

2:打开CMD窗口命令,执行--disable-web-security 指令

msedge.exe   --disable-web-security --user-data-dir=<....> 


## 或者


chrome.exe   --disable-web-security --user-data-dir=<....>

 

3:  第二步执行后,自动打开浏览器窗口,在窗口中输入本地HTML文件地址,打开JSON文件成功。

浏览器本地跨域校验问题解决!

 

参考资料

1)https://cloud.tencent.com/developer/article/1744377

2)https://cloud.tencent.com/developer/article/2321850

 

相关文章
|
9月前
|
人工智能 前端开发 JavaScript
webpack-dev-server代理后端一直报CORS跨域或500错误
在Vue项目中使用Webpack的devServer代理后端接口时,遇到500错误。问题根源在于浏览器请求中携带的Origin头导致服务器报错,而Postman测试正常。通过分析发现,调整或移除Origin头可解决问题。解决办法包括:1) 在代理配置中添加正确的Origin头;2) 删除请求中的Origin头。文章还深入解析了Origin头的作用及changeOrigin配置的实际意义,并附带相关文档链接,帮助开发者更好地理解与解决类似跨域问题。
661 20
|
4月前
|
安全 API PHP
PHP中实现CORS跨域资源共享的方法
通过这种方式,你可以在PHP应用中灵活地实现CORS,以支持跨域Web应用的需求。
313 15
|
11月前
|
前端开发 JavaScript 应用服务中间件
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
跨域问题是前端开发中常见且棘手的问题,但通过理解CORS的工作原理并应用合适的解决方案,如服务器设置CORS头、使用JSONP、代理服务器、Nginx配置和浏览器插件,可以有效地解决这些问题。选择合适的方法可以确保应用的安全性和稳定性,并提升用户体验。
7697 90
|
11月前
|
JSON 缓存 前端开发
对CORS(跨域)的一些见解
CORS(跨域资源共享)是W3C标准,用于解决AJAX跨源请求限制。浏览器与服务器需共同支持CORS,浏览器自动处理请求头,开发者无需额外操作。CORS分为简单请求与非简单请求:简单请求满足特定条件(如方法为GET/POST/HEAD且头信息有限制),浏览器直接发送;非简单请求需先进行“预检”请求(OPTIONS方法),确认服务器允许后才发送实际请求。服务器回应需包含Access-Control-Allow-Origin等字段,以控制跨域访问权限。
268 10
|
安全 Java 应用服务中间件
SpringBoot:CORS是什么?SpringBoot如何解决跨域问题?
CORS是Web开发中常见且重要的机制,SpringBoot通过提供注解、全局配置和过滤器等多种方式来解决跨域问题。选择适合的方式可以帮助开发者轻松处理跨域请求,提高应用的灵活性和安全性。
771 2
CORS 跨域资源共享的实现原理是什么?
CORS 跨域资源共享的实现原理是什么?
|
安全
CORS 跨域资源共享的实现原理
CORS 跨域资源共享的实现原理
287 0
|
JSON 安全 前端开发
浅析CORS跨域漏洞与JSONP劫持
浅析CORS跨域漏洞与JSONP劫持
805 3
|
开发框架 中间件 Java
如何处理跨域资源共享(CORS)的 OPTIONS 请求?
处理 CORS 的 OPTIONS 请求的关键是正确设置响应头,以告知浏览器是否允许跨域请求以及允许的具体条件。根据所使用的服务器端技术和框架,可以选择相应的方法来实现对 OPTIONS 请求的处理,从而确保跨域资源共享的正常进行。
784 61
|
JSON 前端开发 安全
CORS 是什么?它是如何解决跨域问题的?
【10月更文挑战第20天】CORS 是一种通过服务器端配置和浏览器端协商来解决跨域问题的机制。它为跨域资源共享提供了一种规范和有效的方法,使得前端开发人员能够更加方便地进行跨域数据交互。