跨域问题的产生于处理

最新推荐文章于 2024-07-20 22:13:44 发布
最新推荐文章于 2024-07-20 22:13:44 发布
阅读量211 收藏 1
点赞数
分类专栏： nodejs nginx 文章标签： html5 javascript node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nuannuanwfm/article/details/104613867
版权

什么是跨域

1、先了解一下域名的组成：

       

JS 出于安全方面的考虑，不允许跨域调用其他页面的对象，那什么是跨域呢，简单地理解就是因为浏览器同源策略的限制，a.com 域名下无法操作 b.com 或是 c.a.com 域名下的对象

 

#

URL

说明

是否允许通信

1

http://www.a.com/a.js
http://www.a.com/b.js

同一域名下

允许

2

http://www.a.com/lab/a.js
http://www.a.com/script/b.js

同一域名下不同资源地址

允许

3

http://www.a.com:8080/a.js
http://www.a.com/b.js

同一域名，不同端口

不允许

4

http://www.a.com/a.js
https://www.a.com/b.js

同一域名，不同协议

不允许

5

http://www.a.com/a.js
http://20.33.23.61/b.js

域名与域名对应的IP

不允许

6

http://www.a.com/a.js
http://script.a.com/b.js

主域名相同，子域名不同

不允许

7

http://www.a.com/a.js
http://a.com/b.js

主域名相同，子域名不同

不允许

8

http://www.itcast.cn/a.js
http://www.a.com/b.js

不同域名

不允许

 

2、广义的跨域

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的，其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景

知识点：同源策略

同源策略限制一个源的资源（文档或脚本）如何与另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。它的存在可以保护用户隐私信息、防止身份伪造等。

同源策略限制内容有：

  1. Cookie、LocalStorage、IndexedDB 等存储性内容
  2. DOM 节点
  3. AJAX 请求不能发送

跨域简单举例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a页面</title>
</head>

<body>
    <button onclick="clickButton()">A点击</button>
</body>
<script src="./js/jquery-1.10.2.min.js"></script>
<script>
    function clickButton() {
        $.ajax({
            url:'http://www.wfm.com:3000/server',
            success:function(data){
                console.log(data);
            },
            error:function(e){
                console.log(e);
            }
        });

</script>

</html>

    

处理跨域的方法

  • JSONP

（1）原生

html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a页面</title>
</head>

<body>
    <button onclick="clickButton()">A点击</button>
</body>
<script src="./js/jquery-1.10.2.min.js"></script>
<script>
    function clickButton() {

        // jsonp（只能用于get请求）
        // 方式一
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'http://www.wfm.com:3000/server?callback=handleCallback';
        document.head.appendChild(script);


        // 回调执行函数
        function handleCallback(res) {
            alert("回调函数执行！！")
            alert(JSON.stringify(res));
        }

    }
</script>

</html>

  nodejs：

var express = require('express');
var router = express.Router();
var http = require('http');
var querystring = require('querystring');
var url = require('url');

/* GET home page. */
router.get('/server', function (req, res, next) {
  var urlPath = url.parse(req.url).pathname;
  var param = querystring.parse(req.url.split('?')[1]);

  res.writeHead(200, { 'Content-Type': 'application/json;charset=utf-8' });

  var data = { msg: 'helloworld' };
  data = JSON.stringify(data);

  var callback = param.callback + '(' + data + ');';
  res.write(callback);

  res.end();
});

module.exports = router;

 结果：

    

（2）Jquery ajax

html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a页面</title>
</head>

<body>
    <button onclick="clickButton()">A点击</button>
</body>
<script src="./js/jquery-1.10.2.min.js"></script>
<script>
    function clickButton() {

        //方式二
        $.ajax({
            url: 'http://www.wfm.com:3000/server?callback=handleCallback',
            jsonp: 'callback',//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
            type: 'get',
            dataType: 'jsonp',//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以不写，jQuery会把数据拿出来放到success函数的参数里
            jsonpCallback: 'handleCallback',
            success(data) {
                alert('123')
                console.log(data);
            },
            error(XMLHttpRequest, textStatus, errorThrown) {
                console.error(XMLHttpRequest, textStatus, errorThrown)
            }
        });


        // 回调执行函数
        function handleCallback(res) {
            alert("回调函数执行！！")
            alert(JSON.stringify(res));
        }

    }
</script>

</html>

nodejs

var express = require('express');
var router = express.Router();
var http = require('http');
var querystring = require('querystring');
var url = require('url');

/* GET home page. */
router.get('/server', function (req, res, next) {
  var urlPath = url.parse(req.url).pathname;
  var param = querystring.parse(req.url.split('?')[1]);

  res.writeHead(200, { 'Content-Type': 'application/json;charset=utf-8' });

  var data = { msg: 'helloworld' };
  data = JSON.stringify(data);

  var callback = param.callback + '(' + data + ');';
  res.write(callback);

  res.end();
});

module.exports = router;

Tip:为什么呢？？？？

原因就是浏览器是允许三个标签跨域加载资源的：

  <img src="path/to/xxx">

  <link href="path/to/xxx">

  <script src="path/to/xxx"></script>

JSONP利用 <script> 标签的这个开放策略，网页可以得到从其他来源动态产生的 JSON 数据。

但是这种方式只是用与get请求，不推荐使用

  • CORS 跨域资源共享

（1）介绍

跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源

（2）带有身份凭证的CORS

  • 默认情况下的跨域请求都是不会把cookie发送给服务器的，在需要发送的情况下，如果是xhr，那么需要设置xhr.withCredentials=true,
  • 如果是采用fetch获取的话，那么需要在request里面设置 credentials:'include',
  • 但是如果服务器在预请求的时候没返回Access-Control-Allow-Crenditials:true的话，那么在实际请求的时候，cookie是不会被发送给服务器端的，要特别注意对于简单的get请求，不会有预请求的过程，
  • 那么在实际请求的时候，如果服务器没有返回Access-Control-Allow-Crenditials:true的话那么响应结果浏览器也不会交给请求者

（3）HTTP响应首部字段

  • Access-Control-Allow-Origin: <origin> | *
  • Access-Control-Expose-Headers 头让服务器把允许浏览器访问的头放入白名单
  • Access-Control-Max-Age 头指定了preflight请求的结果能够被缓存多久
  • Access-Control-Allow-Credentials
    头指定了当浏览器的credentials设置为true时是否允许浏览器读取response的内容。
  • Access-Control-Allow-Methods 首部字段用于预检请求的响应。其指明了实际请求所允许使用的 HTTP 方法。
  • Access-Control-Allow-Headers 首部字段用于预检请求的响应。其指明了实际请求中允许携带的首部字段

 

后台服务CORS解决跨域(nodejs)

var express = require('express');
var router = express.Router();
var url=require('url');
var app=express();
var allowCrossDomain = function(req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:8899');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Credentials','true');
  next();
};
app.use(allowCrossDomain);

/* GET users listing. */
app.post('/', function(req, res, next) {
  res.send('respond with a resource');
});

module.exports = app;

  • Nginx代理

通过nginx配置一个代理服务器（域名与localhost相同，端口不同）做跳板机，反向代理访问wfm接口，实现跨域

server{
    # 监听8899端口
    listen 8899;
    # 域名是localhost
    server_name localhost;
    #凡是localhost:8899/api这个样子的，都转发到真正的服务端地址http://www.wfm.com:3000
    location ^~ /users {
        proxy_pass http://www.wfm.com:3000;
    }    
}

Tip:配置之后就不需要前端做什么修改了，一般我们在前后端分离项目中开发阶段会采用这种方式，但不是所有场景都能这样做，例如后端接口是一个公共的API，比如一些公共服务获取用户信息等

（1）iframe_a.html：(http://www.wfm1.com:7799/a.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe_a页面</title>
</head>
<body>
    
</body>
<script>
    var proxy = function(url, callback) {
    var state = 0;
    var iframe = document.createElement('iframe');

    // 加载跨域页面
    iframe.src = url;

    // onload事件会触发2次，第1次加载跨域页，并留存数据于window.name
    iframe.onload = function() {
        if (state === 1) {
            // 第2次onload(同域proxy页)成功后，读取同域window.name中数据
            callback(iframe.contentWindow.name);
            destoryFrame();

        } else if (state === 0) {
            // 第1次onload(跨域页)成功后，切换到同域代理页面
            iframe.contentWindow.location = 'http://www.wfm1.com:7799/iframe_proxy.html';
            state = 1;
        }
    };

    document.body.appendChild(iframe);

    // 获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域frame js访问）
    function destoryFrame() {
        iframe.contentWindow.document.write('');
        iframe.contentWindow.close();
        document.body.removeChild(iframe);
    }
};

// 请求跨域b页面数据
proxy('http://www.wfm2.com:6699/iframe_b.html', function(data){
    alert(data);
});

</script>
</html>

（2）iframe_proxy.html：(http://www.wfm1.com/iframe_proxy.html)
中间代理页，与iframe_a.html同域，内容为空即可。

（3）iframe_b.html：(http:// www.wfm2.com /iframe_b.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe_b页面</title>
</head>
<body>
    iframe_b页面
</body>
<script>
    window.name = 'This is domain2 data!';
</script>
</html>

 

weifengming
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
跨域问题的处理
m0_69254913的博客
06-02 567
跨域问题
跨域问题处理
qq_45337431的博客
10-08 96
Ajax跨域 域：协议+IP+端口 http://localhost:8989 http://localhost:8080 http://www.baidu.com:80 1.安全问题 摘自互联网： 为什么AJAX访问不能跨域呢？要讲清楚这个问题，首先要谈谈Cookie 1.客户向A网站的服务器发送登录请求，并携带账号密码数据 2.A网站的服务器校验账号密码正确后，返回响应并给本地添加了Co...
服务端（生命周期）/跨域问题的解决
ZHH_Love123的博客
03-15 691
请求的生命周期
通过实例理解HTTP请求跨域发生在哪个阶段
你佳哥
04-03 1815
目录1 服务端1.1 服务端代码1.2 启动服务1.3 浏览器测试2 网页端2.1 网页代码2.2 打开网页测试3 错误分析3.1 网页端3.2 服务端3.3 结论4 跨域的场景5 解决方案5.1 JSONP5.2 CORS 网上有很多关于跨域的例子，但是都是讲跨域是什么，但是没有讲清除跨域到底发生在HTTP请求的哪个阶段，本文通过实际例子去理解。 1 服务端 1.1 服务端代码 使用node的express编写服务端，当然也可以是其他的，主要是这个简单。 // 1 引入express const expr
跨域发生阶段
yuey0809的博客
11-24 787
一个跨域请求 请求会被正常发出 服务端可以正常接收,正常处理,正常返回 浏览器也能接收服务端返回的数据 接收之后发现当前域与所请求的域不同,所以判定为跨域 浏览器判定为跨域,不会将代码返回给我们 ...
HTTP访问控制（CORS）一文讲解透彻http跨域的来龙去脉
ailiandeziwei的专栏
04-16 865
跨域资源共享(CORS) 是一种机制，它使用额外的HTTP头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。 比如，站点http://domain-a.com的某 HTML 页面通过<img> 的 ...
详解HTTP跨域
summer_fish的专栏
08-06 6038
什么是跨域 所谓跨域，全称是 跨源资源共享 (CORS) Cross- Origin Resource Sharing ，是一种基于 HTTP Header 的机制，该机制通过允许服务器标示除了它自己以外的其它 origin（域，协议和端口），这样浏览器可以访问加载这些资源。 举个例子 运行在domain-a.com的 JavaScript 代码使用XMLHttpRequest分别发起两个请求： 请求A： https://domain-a.com/query 请求B： https://do...
Springboot跨域CORS处理实现原理
08-19
本文主要介绍了 Springboot 跨域 CORS 处理实现原理，通过示例代码详细讲解了跨域问题产生、解决方案和实现原理，对大家的学习或者工作具有一定的参考学习价值。 一、源（Origin） 在 HTTP 协议中，每个 URL 由三...
Cesium加载Geoserver跨域问题
10-15
在IT行业中，尤其是在Web GIS（Web...同时，理解Web开发中的同源策略和跨域资源共享机制对于处理这类问题非常重要。通过遵循上述步骤，你应该能够成功地让Cesium从Geoserver获取并展示地图数据，实现无缝的交互体验。
Spring MVC中自带的跨域问题解决方法
08-29
当尝试访问不同源的资源时，浏览器会阻止这种行为，从而产生跨域问题。 在Spring MVC中，解决跨域问题的关键在于使用`@CrossOrigin`注解。这个注解可以应用于控制器类或具体的方法上，用来声明允许哪些来源的请求...
跨域问题的小实验
08-12
通过这个实验，我们可以深入理解跨域问题的产生原因，学习如何在服务器端和客户端配置CORS，以及了解JSONP和代理等跨域解决方案。实践是检验真理的唯一标准，动手操作会让你对这些知识有更直观的认识。在实际项目中...
快速解决Canvas.toDataURL 图片跨域的问题
09-02
然而，当涉及到跨域图像时，会遇到安全限制，其中最常见的是`Canvas.toDataURL`方法产生的跨域问题。这个问题主要是由于浏览器的同源策略（Same-Origin Policy）所引起的，它限制了一个源（Origin）的文档或脚本访问...
什么是跨域、怎么解决跨域以及如何实现跨域下的登录
Msgyvcici
09-13 3768
前言：在以往开发中，不会涉及到跨域的问题，因为往往都是在同一个项目中开发代码或者单纯写小demo；However，在实际项目中，前后端分成两个不同的项目，各自部署在不同的域名下，这也就会遇到跨域问题了。 既然问题发生了，那就要从根本上去解决问题，在开始说解决方案前，我们有必要了解一下什么是跨域1、什么是跨域在浏览器同源策略限制下，向不同源（不同协...
前端跨域的几种方式
weixin_44292923的博客
03-26 204
同源策略即：同一协议，同一域名，同一端口号。当其中一个不满足时，我们的请求即会发生跨域问题。 三种跨域方法 第一个CORS跨域 第二个JSONP 跨域 第三个代理跨域 CORS跨域 前端直接调用就可以了 在vue中安装axios import axios from ‘axios’ axios(url).then(()=>{ }) jsonp跨域 安装jsonp import jsonp ...
浏览器同源政策及其规避方法
aoquandao8917的博客
04-12 801
作者：阮一峰 摘自：http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html 浏览器安全的基石是"同源政策"（same-origin policy）。很多开发者都知道这一点，但了解得不全面。 ...
HTML5应用的安全防护策略与实践
@云安全小杜
07-17 441
随着HTML5及其相关技术（如CSS3和JavaScript）的普及，Web应用变得越来越强大和复杂，同时也成为黑客攻击的目标。本文将探讨HTML5应用面临的常见安全威胁，以及如何通过最佳实践和代码示例来增强应用的安全性。
HTML5实现好看的天气预报网站源码
xcLeigh
07-18 883
HTML5实现好看的天气预报网站源码，天气预报大作业，网站源码，天气预报网站，天气预报网站源码，这里可以灵活配置要显示的省市区的天气预报，这里用的是北京、上海、广州、深圳、台湾五个地区的天气预报。免费的数据接口，数据API，童话故事API，笑话API，名言API，提供免费天气预报接口，各种新闻资讯类、生活服务类、趣味娱乐类、功能应用类、知识问答类、数据智能类等API接口数据提供。兼容手机端和PC网页端。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
HTML5-canvas1
最新发布
Violetto_Yan的博客
07-20 246
context.beginPath（）之后会用指定新的状态回值。最后一次会把前面的覆盖掉。把图形包在beginPath（）和closePath（）里面。若分别context.strokeStyle=“ ”fillRect()用fillstyle绘制填充矩形。最后一个lineto可以省略 ，会自动连接。strokeRect() 用 绘制矩形边框。4、后绘制的图形会遮挡前面的图形。1、canvas：创建画布。3、canvas自带api。绘制封闭图形 有空隙。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1144
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
跨域问题产生的原因以及解决办法
07-22
跨域问题是由于浏览器的同源策略导致的。同源策略是一种安全机制，它限制了不同源（域名、协议、端口）之间的交互。当页面中的脚本试图访问不同源的资源时，浏览器会阻止该请求。 解决跨域问题有多种方法，以下是几种常用的解决办法： 1. JSONP（JSON with Padding）：JSONP是一种通过动态创建`<script>`标签来实现跨域请求的方法。服务器返回的响应会被包裹在一个函数调用中，客户端通过定义该函数来处理响应数据。 2. CORS（Cross-Origin Resource Sharing）：CORS是一种通过服务器设置响应头来解决跨域问题的机制。服务器可以在响应中添加`Access-Control-Allow-Origin`等头部字段，指明允许访问的源。 3. 代理服务器：可以使用代理服务器来转发请求，绕过浏览器的同源策略。客户端发送请求到代理服务器，代理服务器再将请求发送到目标服务器，并将响应返回给客户端。 4. WebSocket：WebSocket协议支持跨域通信，可以通过建立WebSocket连接来实现跨域数据传输。 这些方法各有优缺点，选择合适的解决办法取决于具体的场景和需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值