Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >什么是前端跨域,怎么解决跨域问题

什么是前端跨域,怎么解决跨域问题

作者头像
全栈程序员站长
发布于 2022-09-06 03:24:13
发布于 2022-09-06 03:24:13
8520
举报

大家好,又见面了,我是你们的朋友全栈君。

什么是跨域?

跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。

所谓同源是指:域名,协议,端口均相同,不明白没关系,举个栗子:

http://www.123.com/index.html 调用 http://www.123.com/server.php (非跨域)

http://www.123.com/index.html 调用 http://www.456.com/server.php (主域名不同:123/456,跨域)

http://abc.123.com/index.html 调用 http://def.123.com/server.php (子域名不同:abc/def,跨域)

http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php (端口不同:8080/8081,跨域)

http://www.123.com/index.html 调用 https://www.123.com/server.php (协议不同:http/https,跨域)

请注意:localhost和127.0.0.1虽然都指向本机,但也属于跨域。

浏览器执行javascript脚本时,会检查这个脚本属于哪个页面,如果不是同源页面,就不会被执行。

解决办法:

1、JSONP:

使用方式就不赘述了,但是要注意JSONP只支持GET请求,不支持POST请求。

2、代理:

例如www.123.com/index.html需要调用www.456.com/server.php,可以写一个接口www.123.com/server.php,由这个接口在后端去调用www.456.com/server.php并拿到返回值,然后再返回给index.html,这就是一个代理的模式。相当于绕过了浏览器端,自然就不存在跨域问题。【如java爬取网络数据用的httpClient请求】

3、PHP端修改header(XHR2方式)

在php接口脚本中加入以下两句即可:

header(‘Access-Control-Allow-Origin:*’);//允许所有来源访问

header(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式

跨域会阻止什么操作?

浏览器是从两个方面去做这个同源策略的,一是针对接口的请求,二是针对Dom的查询

1.阻止接口请求比较好理解,比如用ajax从http://192.168.100.150:8020/实验/jsonp.html页面向http://192.168.100.150:8081/zhxZone/webmana/dict/jsonp发起请求,由于两个url端口不同,所以属于跨域,在console打印台会报No ‘Access-Control-Allow-Origin’ header is present on the requested resource

值得说的是虽然浏览器禁止用户对请求返回数据的显示和操作,但浏览器确实是去请求了,如果服务器没有做限制的话会返回数据的,在调试模式的network中可以看到返回状态为200,且可看到返回数据

https://blog.csdn.net/lianzhang861/article/details/84871369这篇博客有详细介绍

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/136327.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年6月3,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
什么是跨域?什么情况下会发生跨域请求?
跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。
全栈程序员站长
2022/09/02
8200
什么是跨域及怎么解决跨域问题?[通俗易懂]
这篇博文解释的挺清楚,我直接引用 什么是跨域?怎么解决跨域问题?_L瑜-CSDN博客_跨域是什么意思
全栈程序员站长
2022/08/11
13.2K0
什么是跨域及怎么解决跨域问题?[通俗易懂]
php跨域访问的session_php跳转到另一个php
参考文章: php跨域:https://blog.csdn.net/ouxiaoxian/article/details/89332027 预检请求是什么:https://www.jianshu.com/p/89a377c52b48 什么时候会发送options请求:https://juejin.im/post/5cb3eedcf265da038f7734c4
全栈程序员站长
2022/11/10
7360
Springmvc与Springboot对跨域请求的处理办法
什么是跨域呢?跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。所谓同源是指,域名,协议,端口均相同,不明白没关系,举个例子:
游离于山间之上的Java爱好者
2022/08/09
2650
Springmvc与Springboot对跨域请求的处理办法
如何解决跨域问题?
  如何解决跨域问题?首先我们需要知道什么是跨域,跨域指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器对JavaScript 施加的安全限制。
IT可乐
2018/09/28
5.1K0
如何解决跨域问题?
axios实现跨域三种方法_cors跨域axios
跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制。
全栈程序员站长
2022/10/01
15.1K0
axios实现跨域三种方法_cors跨域axios
史上最全跨域总结
跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。
Nealyang
2019/09/29
2K0
HTTP跨域详解和解决方式
那么究竟什么是跨域,跨域又是怎么产生的,以及跨域请求的问题需要怎么解决。我们一起来了解一下这些知识。
仙士可
2019/12/19
5K0
HTTP跨域详解和解决方式
什么是跨域?如何解决跨域问题?
什么是跨域? 浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域 域名:  主域名不同 http://www.baidu.com/index.html –>http://www.sina.com/test.js  子域名不同 http://www.666.baidu.com/index.html –>http://www.555.baidu.com/test.js  域名和域名ip http://www.baidu.com/index.html –>http://180.149.132.47/test.js 端口:  http://www.baidu.com:8080/index.html–> http://www.baidu.com:8081/test.js 协议:  http://www.baidu.com:8080/index.html–> https://www.baidu.com:8080/test.js 备注:  1、端口和协议的不同,只能通过后台来解决  2、localhost和127.0.0.1虽然都指向本机,但也属于跨域
全栈程序员站长
2022/07/01
7900
什么是跨域?如何解决跨域问题?
ajax跨域的解决办法_java如何解决跨域问题
大家好,又见面了,我是你们的朋友全栈君。 什么是跨域问题? 跨域问题来源于JavaScript的”同源策略”,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问。也就是说JavaScrip
全栈程序员站长
2022/09/23
7630
js ajax 跨域问题 解决方案[通俗易懂]
跨域问题来源于JavaScript的”同源策略”,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的,html本身没有跨域问题。
全栈程序员站长
2022/09/25
1.8K0
js ajax 跨域问题 解决方案[通俗易懂]
JavaScript 跨域问题
简单的理解就是因为Javascript同源策略的限制,a.com域名下的js无法操作b.com或者c.a.com域名下的对象。
IT工作者
2022/01/15
5540
深入理解跨域问题
想了解跨域就要先了解什么是同源策略,就好比你要了解什么苹果手机”越狱“,首先要了解什么是ios操作系统。 了解以下名词:
读懂原理
2022/05/13
1.2K0
深入理解跨域问题
Golang 跨域
跨域指的是浏览器不能执行其他网站或域名下的脚本。之所以形成跨域,是因为浏览器的同源策略造成的,是浏览器对javascript程序做的安全限制,现在所有支持JavaScript 的浏览器都会使用这个策略。
孤烟
2020/09/27
1.2K0
3000 字说说跨域!面试官听完之后露出了满意的笑容
我们可以通过window.origin或location.origin得到当前源。
好好学java
2020/03/24
9390
PHP解决跨域问题常用的方法
比如a.test.com/a.html需要调用b.test.com/index.php,我们可以这样做,写一个接口a.test.com/index.php,由这个接口在后端去调用b.test.com/index.php并拿到返回值,然后再返回给a.html,这就是一个代理的模式。相当于绕过了浏览器端,自然就不存在跨域问题。
友儿
2022/09/11
1K0
ajax跨域问题
跨域问题来自于浏览器同源策略的限制,包括DOM同源限制和ajax同源限制,本文探讨的是ajax跨域。ajax跨域指的是一个页面的ajax只能请求和当前页面同源的数据,如果发现请求到的数据不符合要求,浏览器就会阻止返回的数据。所谓同源,指的是协议、域名、端口号都必须完全相同(同一ip的不同域名也是跨域)。同源策略的主要目的是防止csrf攻击,它可以有效地避免由于恶意攻击带来的危险,浏览器器同源策略使得网络访问更加安全。
traffic
2020/04/09
1.5K0
ajax跨域问题
WEB 前端跨域解决方案
2.) 资源嵌入: <link> 、 <script> 、 <img/> 、 <frame> 等 dom 标签,还有样式中 background:url() 、 @font-face() 等文件外链
chuchur
2022/10/25
1K0
Go | Gin 解决跨域问题跨域配置
CORS 全称 Cross-Origin Resource Sharing,中文翻译为 跨域资源共享。CORS 可以看做web服务器和浏览器之间的协议, web服务器声明限制内容,浏览器解析并实施限制。
刘銮奕
2020/12/14
7.3K1
跨域问题及解决方案
在前后端分离项目中,跨域问题是一定会遇到的。跨域问题的出现,会导致css、js或者ajax对后端请求等资源无法访问的情况。
半月无霜
2023/03/03
1.2K0
相关推荐
什么是跨域?什么情况下会发生跨域请求?
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档