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

解决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

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

2. 输入npm install http-server -g

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

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

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

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