跨域
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就是通过这个来解决问题。