归纳跨域几种解决方案

本文主要是介绍归纳跨域几种解决方案，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

什么是跨域？

**说起跨域，就要知道什么是浏览器同源策略

**浏览器同源策略：必须是协议、域名、端口完全一致的才符合同源策略

**如果以上三项，有一项不同都涉及到跨域问题

---

为什么浏览器要设置同源策略呢？

没有同源策略限制的两大危险场景
浏览器是从两个方面去做这个同源策略的，一是针对接口的请求，二是针对Dom的查询。

没有同源策略限制的接口请求

没有同源策略限制的接口请求通常是因为开发者或服务器管理员采取了特定的措施来绕过或放宽同源策略的限制。同源策略是浏览器的一个安全机制，它限制了一个网页只能与其来源相同的网页进行交互。这里的“来源”指的是协议、域名和端口都必须相同。

通常涉及前端应用程序与后端服务之间的通信，特别是在这些服务位于不同源（即不同的协议、域名或端口）时。以下是一些可能导致跨域问题的常见场景：
1.前端应用和后端API位于不同域名：
假设你有一个前端Web应用（如https://frontend.example.com）与一个后端RESTful API（如https://api.example.net）进行通信。由于这两个服务位于不同的域名，浏览器会应用同源策略，阻止前端应用直接访问后端API。
2.前端开发环境使用localhost，而后端服务位于远程服务器：
在开发过程中，前端应用可能运行在本地机器上（如http://localhost:3000），而后端API则部署在远程服务器上（如https://dev-api.example.com）。由于端口和域名都不同，同源策略会阻止这种通信。
3.使用第三方API：
假设你的应用需要调用某个第三方API（如天气API或支付API），而这些API位于与你的应用不同的源上。没有适当的跨域设置，你的应用将无法与这些API通信。
4.使用iframe或popup窗口嵌入内容：
当你在一个页面上使用iframe或JavaScript打开的popup窗口嵌入来自其他源的内容时，这些内容与主页面之间可能会存在跨域问题。例如，你可能希望从iframe或popup中读取或修改主页面上的数据，但由于同源策略的限制，这通常是不允许的。
5.文件协议（file://）与HTTP/HTTPS之间的通信：
如果你在本地通过文件系统（如file:///path/to/your/app.html）直接打开HTML文件，并尝试与HTTP或HTTPS服务器上的服务进行通信，这也会触发跨域问题。
6.端口号不同：
即使域名相同，但如果端口号不同（如http://example.com与http://example.com:8080），也会触发跨域问题。
7.协议不同：
HTTP和HTTPS被视为不同的源。如果你的前端应用使用HTTP，而你的后端API使用HTTPS，那么它们之间的通信将受到同源策略的限制。
8.本地开发服务器与远程测试环境之间的通信：
在开发过程中，开发者可能会将代码部署到远程测试环境进行测试，但前端应用可能仍在本地运行。这种配置也可能导致跨域问题。
为了解决这些问题，开发者可以采用一些技术来允许跨域请求，例如CORS（跨源资源共享）、JSONP（JSON with Padding）、使用代理服务器、或配置浏览器以允许跨域请求（通常仅用于开发环境）

---

跨域解决方案

**1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域**

JSONP跨域

jsonp的原理就是利用<script>标签没有跨域限制，通过<script>标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。
jsonp 缺点是只能发送 get 请求

---

1）原生JS实现：

 <script>var script = document.createElement('script');script.type = 'text/javascript';// 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数script.src = 'http://www.domain2.com:8080/login?                              user=admin&callback=handleCallback';document.head.appendChild(script);// 回调执行函数function handleCallback(res) {alert(JSON.stringify(res));}</script>

服务端返回如下（返回时即执行全局函数）：

handleCallback({"success": true, "user": "admin"})

---

2）jquery Ajax实现：

$.ajax({url: 'http://www.domain2.com:8080/login',type: 'get',dataType: 'jsonp',  // 请求方式为jsonpjsonpCallback: "handleCallback",  // 自定义回调函数名data: {}
});

---

3）Vue axios实现：

this.$http = axios;
this.$http.jsonp('http://www.domain2.com:8080/login', {params: {},jsonp: 'handleCallback'
}).then((res) => {console.log(res); 
})

---

4）node.js实现：

var querystring = require('querystring');
var http = require('http');
var server = http.createServer();server.on('request', function(req, res) {var params = querystring.parse(req.url.split('?')[1]);var fn = params.callback;// jsonp返回设置res.writeHead(200, { 'Content-Type': 'text/javascript' });res.write(fn + '(' + JSON.stringify(params) + ')');res.end();
});server.listen('8080');
console.log('Server is running at port 8080...');

CORS（跨域资源共享）：

**CORS 是一种 W3C 规范，它定义了一种浏览器和服务器交互的方式来确定是否允许跨源请求。
服务器通过在响应头中添加 Access-Control-Allow-Origin 等字段来告诉浏览器哪些源可以访问其资源。
CORS 支持多种 HTTP 请求方法，如 GET、POST、PUT 等。**

---

1.）原生ajax

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容// 前端设置是否带cookie
xhr.withCredentials = true;xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {alert(xhr.responseText);}
};

---

2.）jQuery ajax

$.ajax({...xhrFields: {withCredentials: true    // 前端设置是否带cookie},crossDomain: true,   // 会让请求头中包含跨域的额外信息，但不会含cookie...
});

---

3.）vue框架

a.) axios设置：
axios.defaults.withCredentials = true
b.) vue-resource设置：
Vue.http.options.credentials = true

---

服务器端代理：

这种方法通过在服务器端设置一个代理来转发客户端的请求到目标服务器。
代理服务器与目标服务器之间的通信不受同源策略的限制，因为它们是服务器端之间的通信。
客户端向代理服务器发送请求，代理服务器将请求转发给目标服务器，并将目标服务器的响应返回给客户端。

---

总结来说，没有同源策略限制的接口请求通常是通过 JSONP、CORS、服务器端代理、反向代理或负载均衡器等方法来实现的。这些方法各有优缺点，开发者需要根据具体场景和需求来选择合适的方法。

这篇关于归纳跨域几种解决方案的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---