如何解决跨域问题

Lorem0
101 阅读3分钟

前言

在开发过程中，总是避免不了跨域问题，那么什么是跨域，我们又该如何解决呢？

什么是跨域

  • 跨域问题是指在同一网站或同一服务器中的两个不同的域名之间进行通信时所遇到的问题，当请求的url出现协议，域名，端口与当前的url任意一个不一样时，就会出现跨域，为什么会出现跨域呢？因为受浏览器的同源策略所限制
  • 同源策略：协议，域名，端口都要相同

怎样解决跨域

JSONP

  • JSONP是使用JavaScript动态注入的一种解决跨域问题的技术。在JSONP中，浏览器会向服务器发送一个请求，需要目标服务器进行配合，且仅支持get请求，该服务器将JSON数据包装在一个函数中进行返回。
  • JSONP主要缺点是在传输数据时不会进行加密，这使得应用程序更容易受到攻击。因此，如果你的应用程序处理用户的重要信息，JSONP就不是最好的解决方案。
<script>
window.jsonp = function(resp){
    console.log(resp);
}
</script>

<script src="http://localhost:8080/jsonp?value=123&cb=jsonp"></script>

CORS

  • CORS是一种允许浏览器向跨域服务器发出XMLHttpRequest请求的机制。在默认情况下，浏览器限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这种互动受到同源策略的限制。CORS通过一组新的HTTP头使得浏览器可以把跨源的请求发送到其他源并且获取相应的响应。
  • CORS不会像 JSONP 一样将数据包装在函数中，因此它更加安全。由于服务器控制所有跨域访问，因此可以保护用户数据和敏感信息。
  • 一些常见的CORS头
    • Access-Control-Allow-Origin：允许哪些源可以访问此服务器上的资源。
    • Access-Control-Allow-Methods：允许哪些HTTP方法用于访问此服务器上的资源。
    • Access-Control-Allow-Headers：允许哪些HTTP头可以在请求中出现。
    • Access-Control-Allow-Credentials：指示是否允许发送cookie等凭据。
let xhr = new XMLHttpRequest(); 

xhr.withCredentials = true;

xhr.open('post', 'http://www.baidu123.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);
    }
};

代理服务器

  • 代理服务器是一种将客户端和远程服务器之间的通信路由到自己的服务器的技术。这种方式需要在服务器端进行配置。
  • 同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不存在跨越问题。
  • 在代理服务器模式中，客户端将请求发送到代理服务器，代理服务器则会将请求转发到目标服务器上，最后，将响应结果发送给客户端。在这个过程中，代理服务器可以通过配置来消除请求和响应中的跨域限制，从而解决跨域问题。
avatar
文章
阅读
粉丝