几种常见跨域解决方案

最新推荐文章于 2023-04-27 15:59:29 发布

江夏、

最新推荐文章于 2023-04-27 15:59:29 发布

阅读量1.4k

点赞数

分类专栏： Vue 前端 Java 文章标签： javascript ajax jsonp vue 跨域

本文链接：https://blog.csdn.net/qq_41153943/article/details/106075077

版权

同源策略限制了JavaScript的跨域请求，但实际开发中常常需要跨域获取数据。本文介绍了五种跨域解决方案：JSONP、CORS、vue配置代理、document.domain降域和postMessage。JSONP通过动态创建script标签实现GET请求的跨域，但有安全性和只支持GET的限制。CORS是现代浏览器支持的标准，通过服务器返回特定头信息允许跨域，分为简单请求和预检请求两种类型。vue框架可以通过配置代理解决开发阶段的跨域问题。降域通过设置document.domain让父域与子域或同级子域间通信，但存在安全隐患。postMessage则用于不同窗口或iframe间的跨域通信。

摘要由CSDN通过智能技术生成

一、同源策略

现在很多的项目开发，都实现了前后端分离开发，能够大大提高效率，但是导致前端向后端发送请求，会出现跨域错误。
先说说什么是跨域当访问一个网站时，一个完整的域名由传输协议、网络名、域名主体和域名后缀四个部分组成，如下图所示：
在这里插入图片描述
相同后缀的域名主体是不能重复。http://www.baidu.com和http://www.google.cn就是两个不同的域。跨域就是在当前域去访问其他域的资源。就比如我们在自己的机器上通过ajax去调用百度地图提供的API接口数据，这就是跨域请求。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>
    <div id="div1">
        <button id="btn">请求</button>
    </div>
</body>
<script type="text/javascript">
    window.onload = function() {
   

    var oBtn = document.getElementById('btn');

    oBtn.onclick = function() {
   

        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function() {
   
            if (xhr.readyState == 4 && xhr.status == 200) {
   
                    alert( xhr.responseText );
            }
        };
        xhr.open('get', 'http://api.map.baidu.com/getscript?v=2.0&ak=Kpjp7jddqVUhWK5VkrfNt3YNezY88NtR&services=&t=20170517145936', true);
        xhr.send(); 
    };

};
</script>
</html>

在这里插入图片描述
但是由于浏览器安全策略的原因，这样的请求是行不通的。这种安全策略就是同源策略。
同源策略（Same Origin Policy，SOP）是一种约定，是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响，浏览器很容易受到XSS、CSFR等攻击。
这里的源指的就是：域名，协议，端口。同源就是域名，协议，端口相同。所以同源策略就是出于安全机制的考虑，当前域只能访问当前域的数据，不能访问其他域的数据。
是否同源示例：
在这里插入图片描述

同源策略确实提高了浏览器的安全性，但是正所谓有利就有弊。在提高了安全的同时就限制了Web拓展上的灵活性。
先来说说同源策略限制了以下几种行为：

Cookie、LocalStorage 和 IndexDB 无法读取
DOM 和 Js对象无法获取
AJAX 请求不能发送
但是也有不受同源策略限制的：
1、页面中的链接，重定向以及表单提交是不会受到同源策略限制的。
2、跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的<script src="..."></script>，<img>，<link>，<iframe>等。

二、跨域解决方案

但是问题就是用来解决的，既然有了同源策略的安全限制，那么就会有跨域请求的解决方案。
接下来就说一说我所了解的跨越的解决方案。

1、JSONP

JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写，它是JavaScript设计模式中的一种代理模式。前面提到的不受同源策略限制中的第二点：在html页面中通过相应的标签从不同域名下加载静态资源文件是
被浏览器允许的，所以我们可以通过这个机制来进行跨域。简单的说，就是动态创建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSONP实现跨域请求</title>
</head>
<body>
    <div id="div1">
        <button id=