一、什么是跨域？
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
二、引起跨域的原因
1.浏览器安全限制
2. 同源策略
3. XHR(XMLHttpRequest)请求
三、跨域错误
跨域错误提示
四、解决方案
1. 写入配置文件
在nginx文件夹下的conf文件里有个nginx.conf文件，在location后面加上设置头部的属性，如下：
location / {
root html/dist; #打包后的dist根目录
autoindex on; #开启nginx目录浏览功能
autoindex_exact_size off; #文件大小从KB开始显示
charset utf-8; #显示中文
#解决跨域问题
add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式
add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
add_header 'Access-Control-Allow-Headers' 'x_hztz_token,*';
}
配置好nginx.conf文件后需要重启nginx服务器
2. jsonp解决
jsonp解决跨域问题
- 服务端： 将服务端返回数据封装到指定函数中返回 callback({返回数据})
- 客户端： 不管是我们的script标签的src还是img标签的src，或者说link标签的href他们没有被同源策略所限制，比如我们有可能使用一个网络上的图片，就可以请求得到；所以利用同源策略漏洞，将访问地址放在下面的标签的路径中，
<script src="www.baidu.com">、<img src=""/>、<link href=""/>来解决跨域的问题
下面直接放入源码
<body>
<!-- 1. 设置点击事件 -->
<button onclick="getData()">获取数据jsonp方式</button>
<script>
// 2. 设置点击事件，参数是一格回调函数myJsonp()，myJsonp()的参数是一个对象，对象中有url地址
function getData(){
myJsonp(
{
url:"http://192.168.0.101/music/data/music_jsonp.json",
}
);
}
//3. 定义myJson()函数，创建script标签，设置src地址为请求的地址
//利用同源策略漏洞, <script src="http://192.168.0.101/music/data/music_jsonp.json">
function myJsonp(params){
const scriptEle = document.createElement("script");
scriptEle.src = params.url;
const headEle = document.getElementsByTagName("head")[0];
headEle.appendChild(scriptEle);
}
//4. 回调函数，由系统调用，打印请求的数据结果
function callback(responseData){
console.log(responseData);
}
</script>
</body>
3. jquery中用jsonp解决
直接上源码
<body>
<button onclick="getData()">获取数据jsonp方式</button>
<!-- 引入jquery -->
<script src="js/jquery-3.4.1.js"></script>
<script>
function getData(){
$.ajax({
url:"http://192.168.0.101/music/data/music_jsonp.json",
dataType: "jsonp", //返回数据类型
jsonpCallback: "callback", //指定回调函数名
success: function(res){
console.log(res);
},
error:function(err){
console.log(err);
}
})
}
</script>
</body>
六、注意
在输入网址的时候需要注意端口号是否被占用，若被占用了请在.config配置文件中修改端口
网友评论