跨域?什么跨域?

最新推荐文章于 2024-09-23 08:42:00 发布

做梦都在睡

最新推荐文章于 2024-09-23 08:42:00 发布

阅读量84

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/qq_53791154/article/details/128414627

版权

本文详细介绍了浏览器的同源策略以及跨域的概念，指出只有协议、域名和端口完全一致才被视为同源。接着，列举了六种解决跨域问题的方法，包括jsonp、CORS、postMessage、websocket、Nginx代理和Node.js中间件。每种方法都有其适用场景和优缺点，例如，CORS需要服务器支持，而Nginx代理适用于前后端分离的项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

跨域是什么

是浏览器在保护你(bushi

跨域问题其实就是浏览器的同源策略所导致的。

怎么才算同源

只有当

「协议,域名,端口三者一致」

才是同源。

以下协议、域名、端口一致。

http://www.hahaha.com:80/a.js

http://www.hahaha.com:80/b.js

以下这种看上去再相似也没有用，都不是同源。

http://www.hahaha.com:8080

http://www2.hahaha.com:80

二、如何解决跨域？

1.jsonp

利用 <script> 标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。

2.cors

CORS 需要浏览器和后端同时支持。IE 8 和 9 需要通过 XDomainRequest 来实现。

浏览器会自动进行 CORS 通信，实现 CORS 通信的关键是后端。只要后端实现了 CORS，就实现了跨域。

3.postMessage

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：

页面和其打开的新窗口的数据传递
多窗口之间消息传递
页面与嵌套的iframe消息传递
上面三个场景的跨域数据传递

4.websocket

Websocket是HTML5的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。WebSocket和HTTP都是应用层协议，都基于 TCP 协议。但是 WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时，WebSocket 在建立连接时需要借助 HTTP 协议，连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。

5.NGINX

采用nginx做代理应该是目前跨域解决方案最好的一种。现在强调前后端分离，前端根据后端提供的接口进行数据的交互然后渲染页面。在前端三大框架的同时，开发过程中不需要我们针对跨域配置很多。在网页上线以后。我们经常采用nginx来加载静态的资源，我们把我们前端打包好的文件放到nginx的目录下面，让nginx来处理客服端的静态资源的请求。然后后端部署到另外一个端口号上面，当我们需要进行数据的交互的时候，通过nginx代理把后端数据代理到前端页面。这样的步骤是相较于传统的跨域是最简单也是最有效的一种方法，因为nginx又没有同源策略。不用考虑什么兼容性也不用考虑数据大小。我们在服务器(或者测试代码的时候在本地)安装nginx服务，然后找到我们nginx的配置文件，添加以下配置文件：

server {
  # 把页面部署的端口
  listen 8080;

  # 静态页面存放的目录
  root /var/www/html; 
  index  index.html index.htm index.php;

  # 只代理 /api 开头的接口，其他接口不代理
  location /api/ {
    # 需要代理的地址， 输入我们的后台api地址
    proxy_pass http://127.0.0.1:8888;
  }
}