首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >关于跨域这几天的总结

关于跨域这几天的总结

作者头像
杭州前端工程师
发布于 2018-06-15 04:18:24
发布于 2018-06-15 04:18:24
55500
代码可运行
举报
文章被收录于专栏:前端大白专栏前端大白专栏
运行总次数:0
代码可运行

在前端开发中 难免会遇到跨域的问题,尤其是前后端分离的现在,后端如果是运行的服务器上,而前端运行在本地上,那必须要解决的跨域的问题。

下面列了什么情况下,要解决跨域的问题:

URL

说明

是否允许请求

http://a.example.com/ http://a.example.com/a.txt

同域名下

允许

http://a.example.com/b/a.txthttp://a.example.com/b/a.txt

同域名下不同目录

允许

http://a.example.com/http://a.example.com:8080/a.txt

同域名下不同端口

不允许

http://a.example.com/ https://a.example.com/a.txt

同域名下不同协议

不允许

http://a.example.com/ http://b.example.com/a.txt

不同域下

不允许

http://a.example.com/ http://a.foo.com/a.txt

不同域下

不允许

关于如何解决:

jsonp形式,在react中、angular也有针对这一情况来解决的,当然如果要用jsonp的形式,需要后端来配合返回数据的格式,这种情况在传到同一服务器下并不推荐这样做。

如果是传到同一服务器下的话,建议后端配置一个请求头,我用nodejs写的话,只需要配置一段话就可以了:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
app.all('*', function(req, res, next) {

res.header("Access-Control-Allow-Origin", "*");

next();

});

这段话的意思,设置请求允许任何域名的请求。

以上是个人见解,本人入前端的时间不过1年,如有错误也请指正。关于以上内容如果有疑问可以下方留言;

关于此demo的例子,可以查看个人github:

https://git.oschina.net/kaykie/gerenceshikuayue

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

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JS跨域请求解决方案
同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS.CSFR等攻击。所谓同源是指”协议+域名+端口”三者相同,即便两个不同的域名指向同一个ip地址,也非同源。
码客说
2019/10/22
5.3K0
ajax跨域,这应该是最全的解决方案了
从刚接触前端开发起,跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了,16年时也整理过一篇相关文章,但是感觉还是差了点什么,于是现在重新梳理了一下。 个人见识有限,如有差错,请多多见谅,欢迎提出issue,另外看到这个标题,请勿喷~ 题纲 关于跨域,有N种类型,本文只专注于ajax请求跨域(,ajax跨域只是属于浏览器"同源策略"中的一部分,其它的还有Cookie跨域iframe跨域,LocalStorage跨域等这里不做介绍),内容大概如下: 什么是ajax跨域 理
企鹅号小编
2018/02/02
1.9K0
ajax跨域,这应该是最全的解决方案了
跨域请求方案 终极版
现在是资源共享的时代,同样也是知识分享的时代,如果你觉得本文能学到知识,请把知识与别人分享。
互扯程序
2018/07/30
3.9K0
一篇文章让你搞懂如何通过Nginx来解决跨域问题
出于安全考虑(比如csrf攻击),浏览器一般会禁止进行跨域访问,但是因为有时有相应需求,需要允许跨域访问,这时,我们就需要将跨域访问限制打开。   启动一个web服务,端口是8081
用户4919348
2020/06/21
39.9K2
跨域 webpack + vue-cil 中 proxyTable 处理跨域
跨域 了解同源政策:所谓"同源"指的是"三个相同"。 协议相同 域名相同 端口相同 解决跨域 jsonp 缺点:只能get请求 ,需要修改B网站的代码 cors 这个方案缺点 是 ie6 7 兼容不好(倒是不见得要兼容)。需要B网站在响应中加头 postMessage 缺点也是 ie6 7 兼容不好(倒是不见得要兼容)。需要修改B网站的代码 iframe window.name 传值得方式很巧妙,兼容性也很好。但是也是需要你能修改B网站代码 服务端主动请求B网站,兼容性好而且你客户端的代码还是原来的ajax
Krry
2018/09/10
8290
「深入浅出」前端开发中常用的几种跨域解决方案
看完本文可以系统地掌握,不同种跨域解决方案间的巧妙,以及它们的用法、原理、局限性和适用的场景
用户6835371
2021/06/01
1K0
「深入浅出」前端开发中常用的几种跨域解决方案
ajax实现跨域_js跨域请求的三种方法
跨域大家都知道,不同地址,不同端口,不同级别,不同协议都会构成跨域。例如:about.haorooms.com和www.haorooms.com都会构成跨域。总结起来只要协议、域名、端口有任何一个不同,都被当作是不同的域。下面举例,每两个一组。
全栈程序员站长
2022/09/23
3.2K0
跨域请求传递Cookie问题
前后端完全分离的项目,前端使用Vue + axios,后端使用SpringMVC,容器为Tomcat。 使用CORS协议解决跨域访问数据限制的问题,但是发现客户端的Ajax请求不会自动带上服务器返回的Cookie:JSESSIONID。 导致每一个Ajax请求在服务端看来都是一个新的请求,都会在服务端创建新的Session(在响应消息头中设置Set-Cookie:JSESSIONID=xxx)。 而在项目中使用了Shiro框架,用户认证信息是放在Session中的,由于客户端不会把JSESSIONID返回给服务器端,因此使用Session策略存放数据的方式不可用。
编程随笔
2019/09/11
3.6K0
优秀博客文章 | javascript跨域方法总结
最近面试问的挺多的一个问题,就是JavaScript的跨域问题。在这里,对跨域的一些方法做个总结。由于浏览器的同源策略,不同域名、不同端口、不同协议都会构成跨域;但在实际的业务中,很多场景需要进行跨域传递信息,这样就催生出多种跨域方法。
用户1467662
2019/04/19
6110
优秀博客文章 | javascript跨域方法总结
【Web技术】424- 那些年曾谈起的跨域
对于前端开发来说跨域应该是最不陌生的问题了,无论是开发过程中还是在面试过程中都是一个经常遇到的一个问题,在开发过程中遇到这个问题的话一般都是找后端同学去解决,以至于很多人都忽略了对跨域的认识。为什么会导致跨域?遇到跨域又怎么去解决呢?本文会对这些问题一一的介绍。
pingan8787
2019/11/30
6240
Node.js如何设置允许跨域
张培跃 ID:laozhangsishu 不止于前端 关注 设置允许所有域名跨域: app.all("*",function(req,res,next){ //设置允许跨域的域名,*代表允许任意域名跨域 res.header("Access-Control-Allow-Origin","*"); //允许的header类型 res.header("Access-Control-Allow-Headers","content-type"); //跨域允许的
用户1272076
2019/03/26
6.8K0
Golang 跨域
跨域指的是浏览器不能执行其他网站或域名下的脚本。之所以形成跨域,是因为浏览器的同源策略造成的,是浏览器对javascript程序做的安全限制,现在所有支持JavaScript 的浏览器都会使用这个策略。
孤烟
2020/09/27
1.3K0
一文带你了解跨域的前因后果和解决方案
在了解跨域之前,我们必须要了解一下同源策略。 跨域问题其实就是浏览器的同源策略造成的。
用户6297767
2023/12/23
5180
一文带你了解跨域的前因后果和解决方案
跨域
一、浏览器的同源策略 1.什么是同源? 所谓“同源”指的是”三个相同“。相同的域名、端口和协议,这三个相同的话就视为同一个域,本域下的JS脚本只能读写本域下的数据资源,无法访问其它域的资源。 协议相同 域名相同 端口相同(如果没有写端口,默认是80端口) 2.什么是同源策略? 同源策略是浏览器为了保护用户的个人信息以及企业数据的安全而设置的一种策略,不同源的客户端脚本是不能在对方未允许的情况下访问或索取对方的数据信息; 3.同源策略的目的 同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。
小胖
2018/06/27
2.4K0
一个比较扯淡的跨域问题
2018-08-27更新: 使用cookie前强烈建议先看下MDN的这篇基础文章 创建cookie可以配置的选项 Expires,Secure,HttpOnly,Domain,Path,SameSite。 为避免跨域脚本 (XSS) 攻击,通过JavaScript的 Document.cookie API无法访问带有 HttpOnly 标记的Cookie,它们只应该发送给服务端。
mafeifan
2018/09/10
1.5K0
Ajax技术详解(上)
我们知道,在没有ajax技术之前,客户端若要与服务端进行数据交互,它的大概流程是:客户端发起一个http请求(也可能是其他的请求)然后处于等待状态,等到服务端将数据发送给客户端,客户端才会进行下一步操作,简单来讲,就是单纯的同步操作。然而,在现如今这个用户至上的年代,任何一个让用户不满的小操作都会导致巨大的流量丢失。
石璞东
2020/05/09
2.1K0
浏览器同源策略与如何解决跨域问题总结
下表给出了与 URL http://store.company.com/dir/page.html 的源进⾏对⽐的示例:
henu_Newxc03
2022/05/05
2.1K0
浏览器同源策略与如何解决跨域问题总结
跨域分析以及通解
现今绝大多数新上线的网站都是基于前后端分离的部署模式来对外提供服务,而这种模式在不熟悉的情况下就很容易遇到一个恶心的问题——跨域
Yerik
2022/05/01
1.3K0
跨域方法汇总
做 Web 开发经常需要面对跨域问题,跨域问题的根源是浏览器安全中的同源策略,比如说,对于 http://www.a.com/1.html 来说:
四火
2022/07/18
6530
跨域方法汇总
ajax跨域解决方案_java如何解决跨域问题
从刚接触前端开发起, 跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了,16年时也整理过一篇相关文章,但是感觉还是差了点什么,于是现在重新梳理了一下。
全栈程序员站长
2022/09/23
1.2K0
ajax跨域解决方案_java如何解决跨域问题
相关推荐
JS跨域请求解决方案
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验