解决Cross origin requests are only supported for protocol schemes问题

问题描述

本前端小白在学习的时候尝试按照一个网上的blog的代码来跑一跑，但遇到了一个问题，图片没有正常显示,f12查看控制台看到报错"

Access to image at file://xxx from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https."。

查资料后发现其实问题就是浏览器在访问本地js文件的时候遇到了跨域的问题，我们这种引入方式属于file协议。

主要有两个解决方案

解决方案一增加目标选项

找到chrome的快捷方式，右击属性->快捷方式->目标中添加–allow-file-access-from-files。注意："后面有个空格！

然后关闭chrome的所有窗口再重启即可。

(网上看到好多人成功了但我没有QAQ)

解决方案二使用http-server开启本地服务器

网上看到可以使用http-server

首先在命令行输入node-v和npm -v检查电脑是否安装了node.js（如果确定安装也可以跳过这第一步~）
输入npm install http-server -g

在命令行中进入目标文件夹，启动服务（输http-server -c-1）

http-server -c-1   （只输入http-server的话，更新了代码后，页面不会同步更新）
Starting up http-server, serving ./
Available on:http://127.0.0.1:8080http://192.168.8.196:8080
Hit CTRL-C to stop the server

在浏览器地址栏输入http://127.0.0.1:8080，即可正常运行了~

希望一切顺利，如果过程中出现报错等可以参考“无法将“http-server”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。”解决方案

解决Cross origin requests are only supported for protocol schemes问题相关推荐

【chrome错误】Cross origin requests are only supported for protocol schemes: http, data,chrome-extension
使用ajax请求本地文件,chrome会报跨域错误:XMLHttpRequest cannot loadfile:///C:/Users/Li/Desktop/images/alist.json.Cr ...
【跨域异常】Cross origin requests are only supported for protocol schemes: http, data, chrome,chrome-exten
一.背景描述下面是我用ajax异步请求时的写法,请注意url是怎么写的,下面的错误就是由于这个url的写法导致的. // 获取省份列表 $(document).ready(function () { ...
Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge
Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, h ...
解决跨域Cross origin requests are only supported for protocol schemes的其中一种种办法
跨域问题描述使用vue通过axios.post方法访问spring boot 接口时,会报跨域错误,错误信息如下: Access to XMLHttpRequest at 'http://local ...
Failed to load file:///F:/demo01/styles.less: Cross origin requests are only supported for protocol
由于同源策略,访问不同源的资源,就会产生权限 ,比如我想引用less目录下的 less.js文件,谷歌浏览器出现了这样的错误: 这是产生了跨域,谷歌浏览器会出于安全考虑而阻止这种行为. 解决方法: 进 ...
【VSCode】from origin ‘null‘ has been blocked by CORS policy: Cross origin requests are only supported
Access to script at 'file:///C:/Users/dawulei/Desktop/%E9%A1%B9%E7%9B%AE/%E5%9D%A6%E5%85%8B%E5%A4%A7 ...
from origin ‘null‘ has been blocked by CORS policy: Cross origin requests are only supported for ...
跨源资源请求问题解决方案问题描述:当我们在vsCode中使用 open in brower插件打开html文件文件时,就会报错 xxx已被CORS策略阻止,引入的资源还会失效. 解决办法1 :Liv ...
Access to script at ‘xxx‘ from origin ‘null‘ has been blocked by CORS policy: Cross origin requests
前言本地调试js时,遇到本错误 Google Chrome 84.0.4147.135 (正式版本) (64 位) (cohort: Stable Installs Only) 修订版本 c42bd ...
ajax跨域请求问题：Access to XMLHttpRequest at……has been blocked by CORS policy: Cross origin requests
背景:本地代码调试时,加载本地资源正常,jquery的AJAX请求服务端资源报错. Access to XMLHttpRequest at '***** ' from origin 'null' ha ...

解决Cross origin requests are only supported for protocol schemes问题

解决Cross origin requests are only supported for protocol schemes问题

问题描述

解决方案一增加目标选项

解决方案二使用http-server开启本地服务器

解决Cross origin requests are only supported for protocol schemes问题相关推荐

最新文章

热门文章

解决Cross origin requests are only supported for protocol schemes问题

解决Cross origin requests are only supported for protocol schemes问题

问题描述

解决方案一 增加目标选项

解决方案二 使用http-server开启本地服务器

解决Cross origin requests are only supported for protocol schemes问题相关推荐

最新文章

热门文章

解决方案一增加目标选项

解决方案二使用http-server开启本地服务器