问题杂记
问题杂记
跨域问题
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta http-equiv="Access-Control-Allow-Origin" content="*">
</head>
<body>
<script src="aaa.js" type="module"></script>
<script src="mmm.js" type="module"></script>
<script src="bbb.js" type="module"></script>
</body>
</html>
//aaa.js导出文件
var name="小明"
var age=23
var flag=true
function sum(num1,num2){
return num1+num2
}
if(flag){
console.log(sum(20,30));
}
export{flag,sum}
//另一个js导入文件
import {flag,sum} from "./aaa.js";
if(flag){
console.log("你好");
console.log(sum(40,50));
}
以上问题表示出现的跨域问题,可是为什么会出现跨域呢?
首先,script标签是自带跨域功能的,这也就是我们在某些场合会通过jsonp并结合script来请求资源的原因。
其次,导致跨域的原因是协议、域名、端口号只要有一个不同就会导致跨域,而这里的协议通常是指http协议、https等协议,也就是说http、data、chrome、chrome-extension、https这些协议是支持跨域请求的,而file协议并不支持。
file协议:本地文件传输协议,主要目的就是用于访问本地计算机中的文件,好比通过Windows的资源管理器去打开文件或者通过右键单击打开一样,然后通过“file:文件路径”这样的形式去访问。
浏览器通过file协议和http协议去访问文件(file:///文件路径和http://访问路径)的区别:
file协议:
用于访问本地计算机的文件,好比通过资源管理器打开文件一样,需要注意的是它是针对本地的,即file协议是访问本机的文件资源。
http协议:
访问本地的html文件,相当于将本机作为一台http服务器,然后通过localhost访问的是本地服务器,再通过http服务器去访问本机的文件资
——
通俗说,file协议只是简单请求本地文件,将其作为一个服务器未解析的静态文件打开;而http是在本地搭建一个服务器再通过服务器解析打开文件。
当在本机直接打开一个网页(例如本例的test.html),该网页通过script标签引入了common.js,则在浏览器地址栏呈现的地址是“file:///C:/Users/wangqin/Desktop/test.html”,这样会出现跨域问题。而http、https等协议支持跨域请求,所以解决办法可以通过在本地搭建一个服务器去进行资源的访问来解决跨域问题。
—
搭建本地服务器,可以使用Apache Tomcat;亦可以使用vue-cli或webpack-cli脚手架搭建。具体操作方法此处不再赘述。
Node.js Error: Cannot find module express
Node.js Error: Cannot find module express的解决办法
在执行完下面的全局安装
npm -p install express
仍报Error: Cannot find module express错误。
解决办法:
在自己的工程目录下再次执行
npm install express
网页图片加载403报错解决
Failed to load resource: the server responded with a status of 403 (Forbidden)
方法一:
//在HTML的头文件中 加入下面这句代码
<meta name="referrer" content="no-referrer" />
方法二:
在请求到的图片链接前面加上https://images.weserv.nl/?url=
(是一个专门缓存图片的网址)
控制台中显示的错误中 关于 json 的报错
需要查看哪些地方导致结果的输入不是 json格式的。
比如JSON.parse( “hello world” ) 会报错
图片变蓝问题(鼠标选中或点击滑动造成)
解决:
function stop(e) {
e.preventDefault();
}
document.onselectstart = stop;
//或者:
document.onselectstart = function () {
return false;
}
//补充:
οncοntextmenu = return false; //禁止鼠标右键
οndragstart = return false; //禁止鼠标拖动
onselectstart = return false; //文字禁止鼠标选中
οnselect =document.selection.empty(); //禁止复制文本
或者:
body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}