首页 > 其他分享 >跨域问题

跨域问题

时间:2022-12-15 12:32:45浏览次数:54  
标签:const 跨域 script 问题 同源 document data

跨域问题总结

1.为什么会有跨域这个问题?

原因是浏览器为了安全,而采用的同源策略(Same origin policy)

2.什么是同源策略?

1. 同源策略是由Netscape提出的一个著名的安全策略,现在所有支持JavaScript 的浏览器都会使用这个策略。
2. Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。
3. 所谓同源,也称之为同域,是指:协议,域名(IP),端口必须要完全相同
即:协议、域名(IP)、端口都相同,才能算是在同一个域里。

 

备注:规则举例如下(假设已有网站地址为:​​http://study.cn​​​) ​

跨域问题_跨域问题

3.没有同源策略的危险场景:

危险场景:

有一天你刚睡醒,收到一封邮件,说是你的银行账号有风险,赶紧点进www.yinghang.com改密码。你着急的赶紧点进去,还是熟悉的银行登录界面,你果断输入你的账号密码,登录进去看看钱有没有少了,睡眼朦胧的你没看清楚,平时访问的银行网站是www.yinhang.com,而现在访问的是www.yinghang.com,随后你来了一条短信,钱没了,这个钓鱼网站做了什么呢?大概是如下思路:

<iframe id="baidu" src="https://www.baidu.com"></iframe>

<script type="text/javascript">
const iframe = window.frames['baidu']
const inputNode = iframe.document.getElementById('输入敏感信息的input的id')
console.log(inputNode.value)
</script>

 

3.非同源受到哪些限制?即:跨域了你不能干那些事情

1. Cookie不能读取;
2. DOM无法获得;
3. Ajax请求不能获取数据

 

4.如何在开发中解决跨域问题:

1.JSONP解决发送请求跨域问题:

要明确的是:JSONP不是一种技术,而是程序员“智慧的结晶”(利用了标签请求资源不受同源策略限制的特点) JSONP需要前后端人员互相配合。

前端页面写法:

<body>
<button id="btn">按钮</button>
<script type="text/javascript">
var btn = document.getElementById('btn');
btn.onclick = function () {
//1. 创建一个script标签
var script = document.createElement('script');
//2. 设置回调函数
window.getData = function (data) {
console.log(data);//拿到数据
}
//3. 设置script标签src属性,填写跨域请求的地址
script.src = 'http://localhost:3000/jsonp?callback=getData';
//4. 将script标签添加到body中生效
document.body.appendChild(script);
//5.不影响整体DOM结构,删除script标签
document.body.removeChild(script);
}
</script>
</body>

 

后端写法:

app.get('/jsonp', (req, res) => {
//解构赋值获取请求参数
const {callback} = req.query
//去数据库查找对应数据
const data = [{name: 'tom', age: 18}, {name: 'jerry', age: 20}];
res.send(callback + '(' + JSON.stringify(data) + ')');
})

 

2.后台配置cors解决跨域

以Node为例:
res.set('Access-Control-Allow-Origin', 'http://localhost:63342');

 

3.使用代理服务器

例如:nginx等

 



标签:const,跨域,script,问题,同源,document,data
From: https://blog.51cto.com/u_15687135/5939217

相关文章

  • 论坛常见问题及71个勘误(截至20221204)
    论坛常见问题及71个勘误(截至20221204)......
  • grafana 容器无法启动,打印权限问题
    报错日志open/var/lib/grafana/alerting/1/notifications:permissiondenied问题原因sudochown-Rdocker:/var/lib/docker该命令改变了grafana容器的文件权限......
  • python2中mysql插入中文的问题
    insert_sql_template="""insertintoap_console_template(`id`,`name`,`type`,`content`,`desc`)values(%s,'%s',%s,'%s','%s')"""forrow_datain......
  • 随笔(七)『SpringBoot 解决跨域(全局)』
    1、问题:Access-Control-Allow-Origin2、解决方式一:返回新的CorsFilter【全局】packagecom.baihua.common.config;importorg.springframework.context.annotation.Be......
  • 图灵机原理及其不能解决的问题
    图灵机图灵将计算描述为状态变化的过程,以实现计算的自动化,从而产生了图灵机。 原理将一台图灵机记为 M。 M具有一个有穷状态集S,任意时刻 M处于S中的某个状态(state)......
  • aurora博客问题记录
    1、当前使用的node版本是10.16.0,无法运行,安装为19.2.0可以正常运行2、当前脚手架版本是2.0,运行后浏览器报错:  js文件找不到,无法打开页面3、更新vue-cli版本,先删除当......
  • VNC常用操作及常见问题解决办法汇总
     VNC登录用户缺省是root,但在安装oracle时必须用oracle用户的身份登录,下面我们就以oracle为例说明如何配置VNC,从而可以使用不同的用户登录到主机。步骤描述如下:   步骤......
  • uniapp vue3下的代理转发不生效问题,亲测有效解决
    以前配置过vuevite的代理转发,没想到在uniapp的代理转发下翻车了,其实是一个很小的问题。调试过程中,尝试了webpack、vite等写法在根目录下创建了vite.config.jsvue.co......
  • devexpress report 分组统计不正常问题
    这个report分组功能要求给的数据源排序必须排正确了,比如产品苹果红色苹果绿色 橘子黄色,橘子绿色 这个水果按水果排序,则苹果一组,橘子一组,如果上......
  • 动态规划之背包问题(二)
    接下来我们分析完全背包和01背包的区别,完全背包的内循环是顺序的,而01背包是逆序的。现在关键的是考虑:为何完全背包可以这么写?在次我们先来回忆下,01......