解决跨域问题:has been blocked by CORS

在编辑器web容器可以显示在浏览器无法显示。
解决跨域问题:报错has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.或者无法加载文件报错from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

方式一
*1.*换chrome浏览器
*2.*在chrome浏览器右键属性–目标–后面加上‘ --allow-file-access-from-files’。注意–allow-file-access-from-files前面有空格
*3.*若还是无法显示就采用拖拽html文件到浏览器图标上运行的方式运行html文件。

方式二:
安装浏览器插件,在插件市场搜索Access-Control-Allow-Origin安装重启浏览器即可。注意先要打开插件开关才有效。

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
前端跨域问题是指在浏览器中,当一个Web应用程序(Web page、Web API等)向另一个源(domain、protocol、port)发起请求时,浏览器会根据同源策略(Same-Origin Policy)限制该请求。如果请求的目标与当前页面的源不同,则浏览器会阻止该请求,抛出“has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.”的错误信息。解决这个问题的方法有以下几种: 1. 服务器端设置响应头Access-Control-Allow-Origin,允许指定的源访问资源。例如,设置Access-Control-Allow-Origin: *,表示允许所有源访问资源。 ```javascript // 服务器端设置响应头 response.setHeader('Access-Control-Allow-Origin', '*'); ``` 2. 服务器端设置响应头Access-Control-Allow-Credentials,允许客户端发送包含凭据的请求。例如,设置Access-Control-Allow-Credentials: true,表示允许客户端发送包含凭据的请求。 ```javascript // 服务器端设置响应头 response.setHeader('Access-Control-Allow-Credentials', true); ``` 3. 服务器端设置响应头Access-Control-Allow-Methods,允许客户端使用的HTTP方法。例如,设置Access-Control-Allow-Methods: GET, POST,表示允许客户端使用GET和POST方法。 ```javascript // 服务器端设置响应头 response.setHeader('Access-Control-Allow-Methods', 'GET, POST'); ``` 4. 服务器端设置响应头Access-Control-Allow-Headers,允许客户端发送的请求头。例如,设置Access-Control-Allow-Headers: Content-Type,表示允许客户端发送Content-Type请求头。 ```javascript // 服务器端设置响应头 response.setHeader('Access-Control-Allow-Headers', 'Content-Type'); ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值