完美解决浏览器跨域的几种方法(汇总)_网络技术

完美解决浏览器跨域的几种方法(汇总)

发布时间 - 2026-01-11 01:00:54 点击率：次

1、什么是跨域问题

在页面中使用js访问其他网站的数据时，就会出现跨域问题，比如在网站中使用ajax请求其他网站的天气、快递或者其他数据接口时，以及hybrid app中请求数据，浏览器会提示一下错误：

XMLHttpRequest cannot load http://你请求的域名. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://当前页的域名' is therefore not allowed access.

2、为什么会出现跨域问题

因为浏览器收到同源策略的限制，当前域名的js只能读取同域下的窗口属性。

同源策略：不同的域名, 不同端口, 不同的协议不允许共享资源的，保障浏览器安全。

同源策略时针对浏览器设置的门槛。如果绕过浏览就能实现跨域，所以说早期的跨域都是打着安全路数的擦边球，都可以认为是 hack 处理。

3、现在总结一下解决跨域的几种方法

jsonp 跨域方法

我们提供一个 script 标签. 请求页面中的数据, 同时传入一个回调函数的名字. 服务器端得到名字后, 拼接函数执行格式的字符串. 发送回浏览器. script 在下载代码以后并执行, 执行的就是这个函数调用形式的字符串, 因此就将本地函数调用了.同时拿到了从服务器端得到的数据。

window.name

window对象的name属性是一个很特别的属性，当该window的location变化，然后重新加载，它的name属性可以依然保持不变。那么我们可以在页面A中用iframe加载其他域的页面B，而页面B中用JavaScript把需要传递的数据赋值给 window.name，iframe加载完成之后，页面A修改iframe的地址，将其变成同域的一个地址，然后就可以读出window.name的值了。这个方式非常适合单向的数据请求，而且协议简单、安全。不会像JSONP那样不做限制地执行外部脚本。

document.domain

通过修改document的domain属性，我们可以在域和子域或者不同的子域之间通信。同域策略认为域和子域隶属于不同的域，比如 www.a.com和sub.a.com是不同的域，这时，我们无法在www.a.com下的页面中调用sub.a.com中定义的JavaScript 方法。但是当我们把它们document的domain属性都修改为a.com，浏览器就会认为它们处于同一个域下，那么我们就可以互相调用对方的 method来通信了。

window.postMessage

window.postMessage是HTML5定义的一个很新的方法，这个方法可以很方便地跨window通信。由于它是一个很新的方法，所以在很旧和比较旧的浏览器中都无法使用。

借助于服务器代码来跨域（正向代理、反向代理）

正向代理： 我借助与我的服务器, 像数据服务器发送数据, 我的服务器只需要向数据服务器发送get请求即可

反向代理： 与正向代理类似, 但是不借助于脚本, 而是直接使用服务器映射 url.

例如：我们的 url 是 http://studyit.com

数据服务器的 url 是 http://api.botue.com/login

在 apache 配置一个 url 的代理映射

理论上使用 url: http://studyit.com/api 是在网站根目录下找 api 文件夹

但是现在 apache 提供一个映射的功能, 将 /api 映射到 http://api.botue.com

有了这个映射, 那么访问 http://api.botue.com/login 就可以利用 /api/login来访问了.

反向代理的好处:

不仅实现了跨域( 服务器帮我们实现的 ), 而且访问数据的时候就好像在访问本地服务器一样.如此, 诸如 cookie 等数据就可以直接获得了.

怎么使用反向代理( 不同的服务器的使用方法不一样 )

1) 找到 httpd.conf 配置文件, 找到里面的 porxy 开头的两个模块加载项. 去掉其注释.

　　LoadModule proxy_module modules/mod_proxy.so
　　LoadModule proxy_http_module modules/mod_proxy_http.so

2) 找到虚拟主机的配置文件. 需要谁来做反向代理就修改谁的配置文件，在虚拟主机的设置中( 就是那一对尖括号中 )添加两个选项

　　ProxyRequests Off
　　ProxyPass /abc http://test2.com

3) 重启服务器

CORS 跨域

CORS 是在 es5 之后提出的跨域方案. 只需要在服务器配置一个跨域响应头接口

与jsonp相比的优点：

1、 JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。

2、使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。

3、 JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS。

代码如下：

客户端：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <button id="btn">请求</button>
  <script src="./jquery-3.2.0.js"></script>
  <script>
  
    $( '#btn' ).click(function () {

      $.ajax( {
        url: 'http://test2.com/03-index.php',
        success: function ( info ) {
          console.log( info );
        }

      });

    });
  </script>
</body>
</html>

服务器端：

<?php

// header( 'Access-Control-Allow-Origin: *' ); // 允许任意的网站跨域

header( 'Access-Control-Allow-Origin: http://test1.com' );//允许指定网站

echo 'cors 跨域';
?>

以上这篇完美解决浏览器跨域的几种方法(汇总)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

# 浏览器解决跨域 # 跨域解决之JSONP和CORS的详细介绍 # 快速解决跨域请求问题:jsonp和CORS # CORS跨域问题常用解决方法代码实例 # 跨域(CORS)问题的解决方案分享 # JS跨域解决方案之使用CORS实现跨域 # 一文详解最常见的六种跨域解决方案 # 就可以 # 加载 # 就会 # 是在 # 配置文件 # 只需 # 我们可以 # 给大家 # 提供一个 # 虚拟主机 # 都是 # 是一个 # 几种方法 # 就能 # 将其 # 要在 # 它是 # 希望能 # 不做 # 不支持

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：如何强制重新安装Linux软件包 yum reinstall

下一篇：选择VPS主机搭建网站：如何确保网站稳定运行？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：如何强制重新安装Linux软件包 yum reinstall

下一篇：选择VPS主机搭建网站：如何确保网站稳定运行？