跨域
跨域
1.什么是跨域
1.1在不同的域访问
当前从baidu.com----访问------>taobao.com，就是CORS跨域。
当前从baidu.com----访问------>baidu.com，就不是CORS跨域。
验证：
1.2在相同的域不同的端口也是跨域访问
使用node.js来解释，先搭建node.js服务器。
1.D盘下建立文件夹CORS
2.VScode中打开，并在终端下安装npm install http-server和npm install express第三方模块。
3.文件夹下建立server.js文件
var express=require('express'); //90端口的服务，将当前目录做为http服务 var app=express(); app.use(express.static(__dirname)) app.listen(90) //91端口的服务，返回数据 var app2=express(); app2.get("/",function(req,res){ res.send("你好") }) app2.listen(91)
4.文件夹下建立index.html文件
<!DOCTYPE html>
<html>
<body>
<h1>Hello!</h1>
</body>
</html>
5.在终端启动server.js
D:\CORS>node .\server.js
6.浏览器查看结果
7.现在修改index.html。让其访问同域的91端口
<!DOCTYPE html>
<html>
<body>
<h1>Hello!</h1>
<script>
fetch("http://localhost:91/")
.then(res=>res.text())
.then(data=>{alert(data)})
</script>
</body>
</html>
8.访问localhost:90端口，就是把server.js所在的文件夹作为根目录，默认访问的就是该文件夹下的index.html文件。但同时访问91端口，就会出现跨域失败。
2.解决跨域的方法
2.1第一种方法：修改响应头
参考报错的提示，添加响应头
var express=require('express'); //90端口的服务，将当前目录做为http服务 var app=express(); app.use(express.static(__dirname)) app.listen(90) //91端口的服务，返回数据 var app2=express(); app2.get("/",function(req,res){ res.header("Access-Control-Allow-Origin","*")//响应头，任何域名 res.send("你好") }) app2.listen(91)
运行localhost:90
可以访问91端口，弹出对话框
2.2第二种方法：jsonp
我们知道通过href或src去请求的"js脚本"、“css文件”、“img图片文件”或者“视频文件”都不存在跨域问题，只有通过ajax请求下来的才存在跨域问题。jsonp就是通过这个来解决问题。
