-
2019-10-17 14:29:09
首先, 在开篇, 我需要声明一点, 请善用搜索引擎, 百度即便是对于搜技术解决方案再垃圾, 也不可能你 跨域 这种基础的问题都找不到答案的, 跨域根本不算是什么大问题. 而且, 不要总是特立独行, 你只是个普通人, 胳膊永远是拧不过大腿的, 学会团队合作, 学会和后端沟通, 和技术总监沟通, 把你的意见发表出来, 并说出因为所以然.
为什么会有跨域这个问题
- 因为前端代码是跑在 浏览器 里的, 你的所有网路请求说白了就是 浏览器 帮你发出去的. 并不是什么 js 帮你发出去的, js只是一门语言, 他只是按照浏览器的要求, 语法的要求, 按照一定的规范和格式, 把数据发出去, 就是这样.
- 为什么后端没有跨域这个问题, 因为后端是跑在 系统 里面的
- 浏览器可以主动发起一个 跳过跨域 的网络请求(放弃吧! 和前端无关! 儿子控制不了爸爸), 但是他不会让你在 它的内核 里发起跨域请求. 浏览器是跑在 系统 里的, 后端写的程序也是直接跑在 系统 里的, 前端相当于是 浏览器的下属, 得听从 浏览器 的规则.
- 为什么浏览器不允许你去发送跨域请求? 很简单, 因为没有那家浏览器有那个能力自己造内核, 基本都是行业内比较知名的内核, 比如 chrome 的内核, 浏览器只是一个壳, 然后把内核嵌入进去, 你前端界面的渲染包括界面的展示, 并不是浏览器弄出来的, 而是内核渲染出来的.
- 既然这个问题明白了, 只要是个正常人, 都能明白了, 浏览器需要按照内核的要求, 来界定你是否可以发一个跨域请求出去. 非常不幸的告诉你, 是个正常的内核, 纯前端都是不允许发跨域请求的.
拆台杠精上线
博主, 我觉得你说的不对, 你看哈, 我要使用 vue-cli 建立的 webpack 项目, 配置了 proxyTable , 使用 npm run dev 跨域访问了! 你这说的不对, 前端是可以发跨域请求的!
- 首先, 请把这个单词翻译过来理解下: proxyTable, 是什么意思? 代理表, 什么是代理, 代理就是代替你请请求某个url并将结果返回给你, 谁给你代理? 并不是浏览器给你代理的, 是 vue-cli 下的 小型服务器 帮你去请求这个url的, 换言之就是, 你在网页上发起了一个 ajax 请求, 小型服务器会拦截你这个请求, 然后帮你发出去, 然后等对面回应了, 再将结果返回给你. 浏览器根本就管不到了. 浏览器这时候只负责的角色是: 这里有人要发起一个ajax请求了, 呐, 丢给你, 你去处理吧, 处理好了丢给我, 我再给他 , 是这样的, 明白不?
- 还有, 小型服务器只有在 npm run dev 模式下才有效, 也就是说, 只有在开发模式下代理表才生效, 如果你是构建的代码 npm run build 那个对不起, 没人给你拦截请求并代替你请求了, 又回归到浏览器的约束层, 明白不?
博主, 不行! 你说的还不对, 我就是觉得不对, 那你说, 为什么我自己请求你所谓的那个小型服务器就没有跨域的提示?
- 很简单, 因为你们符合 同源策略, 这个名词我再稍后再详细讲解, 对于浏览器而言, 你们是 一家人, 既然是一家人, 那浏览器还管你干嘛? 管多了还怪浏览器"多管闲事"呢. 而对于不符合同源策略的规则, 浏览器就类似于扮演着"银行"的角色, 你们都不是一个家人, 凭什么我让你从他的卡里取钱? 待会人家钱没了还怪我喽? 这傻X事情浏览器可不做.
什么是同源策略
- 同源策略, 通俗易懂的解释就是 界定你们是一家人的标志
- 如何才是一家人? 很简单, 协议, 域名, 端口 全部一致, 即可
- 举个例子: 你在本地跑一个项目, 端口是8080, 然后去请求百度的接口(打个比方), 肯定是不符合同源策略的, 你看, 你本地是什么地址? 127.0.0.1? localhost? 百度呢? baidu.com, 你看, 不一样吧. 你本地肯定是 http:// 打头吧? 百度呢? https:// 打头, 你看, 又不一样, 那百度的端口呢? 80(为什么是80这里不扩展了,懂的自然懂), 你呢? 8080, 如果是你, 你会觉得这两个玩意是一家人???
如何解决呢
如果您仔细阅读了上面的因为所以然, 那么您一定能猜到怎么解决问题了, 那很简单, 就是让浏览器 认为 你们是一家人, 就这样, 那怎么解决呢? 也很简单, 注意, 如下部分请给后端人员看, 纯前端我说的已经很清楚了, 无法处理跨域请求. 还不理解的在读一遍博文.
-
小伙伴, 首先, 你需要写一个拦截器, 然后把所有接口(假设你所有接口都需要前端去请求而不是自己用的话)拦截住, 然后统一修改请求头部分即可.
- 添加 Access-Control-Allow-Origin 字段, 表示允许那些域名访问接口, 图省事的话, 参数填写成星号即可(*), 及允许任何域名访问接口, 当然很显然, 这是不安全的, 部署上线阶段建议改为指定的域名
- 添加 Access-Control-Allow-Methods 字段, 表示允许那些类型的请求, 图省事也可以填写成星号(*), 这个一般对安全影响不到, 较真的话可以写成 GET,POST, 因为一般来说, 接口都只用这两种方式(不接受杠精)
- 如果您的身份验证机制还是 session 的话, 强烈建议您和您的老板说, 换成JWT的模式, 至于JWT是个什么鸟玩意自行百度或者我有时间再写吧! 前后端分离的模式标配 JWT, session的模式属于SSR那种模式的标配, 跑题了, 如果你的验证方式是 session 的话, 那么不好意思, 你还要添加一个 Access-Control-Allow-Credentials 字段, 参数为 true, 表示允许发送身份凭证(也就是所谓的sessionID)到接口, 前端的ajax请求还需要调整, 具体可看后面的博文), 这样, 您的后端程序, 才能通过 sessionID找到对应的某个用户, 然后就不用我说了, 你懂得...
更多相关内容 -
为什么会有跨域的问题出现,如何解决跨域问题
2021-08-09 10:53:29为什么会有跨域的问题出现,如何解决跨域问题 什么是跨域 定义: 跨域是指a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了...为什么会有跨域的问题出现,如何解决跨域问题
什么是跨域
定义: 跨域是指a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源。注意:
跨域限制访问,其实是浏览器的限制
。理解这一点很重要!!! 指的是浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对
javascript
施加的安全限制,防止他人恶意攻击网站. 比如一个黑客,他利用
iframe
把真正的银行登录页面嵌到他的页面上,当你使用真实的用户
名和密码登录时,如果没有同源限制,他的页面就可以通过 JavaScript 读取到你的表单中输
入的内容,这样用户名和密码就轻松到手了。什么是同源策略
同源策略 是客户端脚本(尤其是 Javascript)的重要的安全度量标准。它最早出自 Netscape
Navigator2.0,其目的是防止某个文档或脚本从多个不同源装载。所谓同源指的是:协议,
域名,端口相同,同源策略是一种安全协议,指一段脚本只能读取来自同一来源的窗口和
文档的属性解决方式
1、jsonp
1.1)去创建一个 script 标签
1.2)script 的 src 属性设置接口地址
1.3)接口参数,必须要带一个自定义函数名 要不然后台无法返回数据。
1.4)通过定义函数名去接收后台返回数据
//去创建一个 script 标签 var script = document.createElement("script"); //script 的 src 属性设置接口地址 并带一个 callback 回调函数名称 script.src = "HTTP://127.0.0.1:8888/index.php?callback=jsonpCallback"; //插入到页面 document.head.appendChild(script); //通过定义函数名去接收后台返回数据 function jsonpCallback(data){ //注意 jsonp 返回的数据是 json 对象可以直接使用 //Ajax 取得数据是 json 字符串需要转换成 json 对象才可以使用。 }
2、 CORS:跨域资源共享
原理:服务器设置 Access-Control-Allow-OriginHTTP 响应头之后,浏览器将会允许跨域请求
限制:浏览器需要支持 HTML5,可以支持 POST,PUT 等方法兼容 ie9 以上,需要后台设置2.1)跨域请求后的响应头中需要设置
2.2)Access-Control-Allow-Origin 为发起请求的主机地址
2.3)Access-Control-Allow-Credentials,当它被设置为 true 时,允许跨域带 cookie,但此时 Access-Control- Allow-Origin 不能为通配符*
2.4)Access-Control-Allow-Headers,设置跨域请求允许的请求头
2.5)Access-Control-Allow-Methods,设置跨域请求允许的请求方式
Access-Control-Allow-Origin: * //允许所有域名访问,或者 Access-Control-Allow-Origin: HTTP://a.com //只允许所有域名访问
3、反向代理
3.1)使用 vue-cli 脚手架搭建项目时 proxyTable 解决跨域问题
//打开 config/index.js,在 proxyTable 中添写如下代码: //会拦截到/api的请求代理到目标服务器 http://f.apiplus.cn/xxx proxyTable: { '/api':{ target: 'http://f.apiplus.cn', //目标服务器地址 changeOrigin: true, //改变源,是否跨域 pathRewrite: { '^/api': '/xxx' //路径重写,重定向 } } }
4.window+iframe
需要目标服务器响应window.name
5.nginx反向代理解决跨域问题
找到nginx的配置文件“nginx.conf”,修改一下信息.
server { listen 80; #监听80端口,可以改成其他端口 server_name localhost; # 当前服务的域名 #charset koi8-r; #access_log logs/host.access.log main; location / { proxy_pass http://localhost:81; proxy_redirect default; } location /apis { #添加访问目录为/apis的代理配置 rewrite ^/apis/(.*)$ /$1 break; proxy_pass http://localhost:82; } #以下配置省略
配置解释: 1.由配置信息可知,我们让nginx监听localhost的80端口,网站A与网站B的访问都是经过localhost的80端口进行访问。 2.我们特殊配置了一个“/apis”目录的访问,并且对url执行了重写,最后使以“/apis”开头的地址都转到“http://localhost:82”进行处理。 3.rewrite ^/apis/(.*)$ /$1 break; 代表重写拦截进来的请求,并且只能对域名后边以“/apis”开头的起作用,例如www.a.com/apis/msg?x=1重写。只对/apis重写。 rewrite后面的参数是一个简单的正则 ^/apis/(.*)$ ,$1代表正则中的第一个(),$2代表第二个()的值,以此类推。 break代表匹配一个之后停止匹配。
-
为什么会产生跨域问题?
2019-10-19 19:17:45同时满足三个条件才有可能产生跨域问题。 解决跨域问题方案。 1,从浏览器出发,允许浏览器跨域。 2,从XHR(XMLHttpRequest)出发 (1)避免发生跨域。使用jsonp,由于jsonp请求是通过script的...1、浏览器限制
2、跨域(协议,域名,端口不一样都是跨域)
3、XHR(XMLHttpRequest请求)
同时满足三个条件才有可能产生跨域问题。
解决跨域问题方案。
1,从浏览器出发,允许浏览器跨域。
2,从XHR(XMLHttpRequest)出发
(1)避免发生跨域。使用jsonp,由于jsonp请求是通过script的方式发送的(只有xhr的请求方式才有可能产生跨域问题),所以不会产生跨域问题。Spring MVC实现过程:前台使用ajax的get请求,将dataType设为“jsonp”;服务器创建一个类并继承抽象类AbstractJsonReponseBodyAdvice,最后注解@ControllerAdivece。使用jsonp的弊端,只能使用get方式请求,服务器需要改动代码,发送的不是xhr请求。
(2)产生跨域后解决。
从被调用方考虑,有三种情况,分别是服务器实现,nginx配置和apache配置。
服务器实现需要注意两种情况,简单请求和非简单请求。简单请求是先执行请求再验证,非简单请求是先验证再请求。
简单请求(比较常见):方法为get,head,post,请求header里面没有自定义头,Content-Type的值为以下几种 text/plain,multipart/form-data,application/x-www-form-urlencoded。
非简单请求(比较常见):put,delect方法的ajax请求,发送json格式的ajax请求,带自定义头的ajax请求。
简单请求处理方案:在响应头中添加
Access-Control-Allow-Origin=“允许跨域的url”,即跨省域时,请求头Origin的值,所以一般是获取Origin的值。
Access-Control-Allow-Method=“*”,允许的方法。
非简单请求处理方案:在相应头中添加
Access-Control-Allow-Origin=“允许跨域的url”,即跨域时,可以获取请求头Origin的值。
Access-Control-Allow-Method=“*”,允许的方法
Access-Control-Request-Headers=“Content-Type,自定义的header的key”。
带cookies的跨域解决:在响应头添加
Access-Control-Allow-Credentials,="true",允许使用cookies
ngnix配置:
apache配置:没搞过
若是使用spring框架:使用@CrossOrigin注解既可以实现服务端跨域
-
为什么会产生跨域,以及解决跨域的方法
2020-05-08 23:53:281、为什么会产生跨域 答:因为浏览器的同源政策,就会产生跨域。比如说发送的异步请求是不同的两个源,就比如是不同的的两个端口或者不同的两个协议或者不同的域名。由于浏览器为了安全考虑,就会产生一个同源政策,...一、跨域
1、为什么会产生跨域
答:因为浏览器的同源政策,就会产生跨域。比如说发送的异步请求是不同的两个源,就比如是不同的的两个端口或者不同的两个协议或者不同的域名。由于浏览器为了安全考虑,就会产生一个同源政策,不是同一个地方出来的是不允许进行交互的。
2、怎么解决跨域
解决跨域的方法:第一种jsonp的方法。第二种使用CORS解决跨域问题,即跨域资源共享,在后端设置响应头部,加一句代码:access-control-allow-origin:"*"或者允许交互的域名。第三种使用vue,找到config文件下->index.js文件,修改propyTable中的target的值,就可实现用前端解决跨域。第四种,使用代理;第五种,使用postmessage
1、jsonp方法:
jsonp是一种借助于 script 标签发送跨域请求的技巧方案。script的src属性可以访问网络上的资源,并script标签可以拿到响应体。
<script> function test(json){ console.log('我被调用了'); console.log(json); } </srcipt> <script src="http://api.douban.com/v2/movie/top250?callback=test"></script>
我们可以看到,我们预先定义了一个函数叫test,再然后在src里加了一个参数callback=test,可以发现,当请求完成,会自动调用test这个函数,并且把响应体(JSON数据)当做参数传递过来.实际上是浏览器用script的src去发起请求,并且传递一个参数叫callback=函数名,服务器接收到这个函数名,在返回的响应体里面调用这个函数,并且把json当做参数传递.
注意:(1).Jsonp不是一套新技术,只是聪明的程序员想出的一套方案
(2)能不能用这套方案,要看服务器端代码怎么写,服务器端如果写了调用函数的代码,那么就能支持JSONP方案.如果是在JQuery中使用Ajax,则只需要在dataType属性中把json改为jsonp即可;
2、后端处理跨域方法:使用cors解决跨域问题,即跨域资源共享,设置响应头。
<?php $json = array("name"=>"jack","age"=>16); //代表告诉浏览器,我允许任意域名访问我这个接口 //如果写一个*,代表所有域名都可以来访问我 // header('Access-Control-Allow-Origin: *'); //如果写的是指定域名,代表只有这个域名可以访问 header('Access-Control-Allow-Origin: *'); echo json_encode($json); ?>
3、前端跨域方法:使用vue
找到config文件下->index.js文件,修改propyTable中的target的值。
proxyTable: { “/api”: { target: “http://localhost:8080”, changeOrigin: true, pathRewrite: { ‘^/api’: ‘’ } } }
4、iframe嵌套通讯,postmessage
HTML5引入了一个全新的API:跨文档通信 API(Cross-document messaging)。这个API为window对象新增了一个window.postMessage方法,允许跨窗口通信,不论这两个窗口是否同源。
本文部分参考:https://blog.csdn.net/sinat_28296757/article/details/80771082
-
为什么会出现跨域,如何解决-详细全网最详细
2022-03-25 15:26:15什么是跨域问题就是前端调用的后端接口不属于同一个域(域名或端口不同),就会产生跨域问题,也就是说你的应用访问了该应用域名或端口之外的域名或端口。这都是同源策略在发挥作用。 同源策略 同源策略/SOP(Same ... -
出现跨域问题的原因及其解决方法
2021-07-12 18:30:081、出现跨域问题的原因: 同源策略 2、同源策略 三同 协议相同 域名相同 端口相同同源策略目的 保证用户信息安全,防止恶意网站窃取数据。同源策略是必须的,否则cookie可以共享。 3、同源策略目的 保证... -
为什么会有跨域?跨域的原因是什么?
2020-02-27 10:25:15跨域+springmvc http://blog.csdn.net/wabiaozia/article/details/52778335 ...跨域:ajax跨域,这应该是最全的解决方案了http://web.jobbole.com/93344/ 阮一峰 跨域资源共享 CORS 详解:http://... -
nginx跨域问题,解决多端口,多ip问题
2020-03-26 15:48:28使用nginx进行服务器管理,经常会遇到跨域问题,此文档就是解决此类问题; nginx跨域问题,解决多端口,多ip问题 -
前端后端跨域问题
2019-01-02 23:31:23跨域 原因: 浏览器限制 跨域(域名,端口,协议,ip不一样) 在使用XMLHTTPRequest对象发送HTTP请求时,会遇到同源策略问题,域不同请求会被浏览器拦截。 -
cesium跨域加载问题
2019-02-20 17:29:16解决Cesium访问数据跨域问题,数据使用tomcat部署在服务器上。 -
什么是跨域问题?跨域解决问题
2021-08-07 22:58:06为什么会出现跨域问题? 出于浏览器的同源策略限制.同源策略是一种约定,它是浏览器最核心也是最基本的安全功能,如果缺少了同源策略,则浏览器的正常的功能可能会受到影响,跨域收是Web是构建在同源策略基础上的,浏览器... -
什么是跨域?怎么解决跨域问题
2021-11-27 11:17:07同源策略 同源策略案例 什么是跨域 跨域解决方法 1.ajax的jsonp 2.CORS方式 3.nginx 转发 -
什么是跨域问题?跨域问题怎么解决?
2022-03-28 16:25:57这里所说的域是指协议+域名+端口号,如果这三者都完全一致,则是同域请求,只要有一个不同,就是跨域请求。 二、预检请求 浏览器发送请求时,会判断是什么请求,如果是简单请求,直接执行服务端程序。如果是非简单... -
跨域小结(为什么form表单提交没有跨域问题,但ajax提交有跨域问题)
2019-08-15 23:30:47版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/wabiaozia/article/details/78771709 原文链接:... -
什么是前端跨域,怎么解决跨域问题
2021-02-02 08:51:01什么是跨域? 跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。 所谓同源是指:域名,协议,端口均相同,不明白没关系,举个栗子: ... -
如何解决跨域以及为什么会产生跨域?
2021-04-08 11:26:50浏览器的同源策略指的就是协议,域名,端口,三者都相同,如果其中有一个不同就属于跨域 跨域可能造成的报错 ajax在不同域名下的请求无法实现 常用的解决跨域的方法 1. JSONP跨域 JSONP(JSON with Padding: 填充式... -
完美解决iframe跨域问题
2016-04-18 14:37:04框架完美解决了iframe之间的跨域通讯。底层技术采用window.name转换代理实现 -
tomcat解决跨域访问问题配置
2016-09-06 17:55:47tomcat解决跨域访问问题,具体配置如下: 1、修改tomcat下的Conf/web.xml文件,在该文件内容中新增以下配置,注意,若该web.xml中存在其它filter,则需要将该filter放在所有filter前面; <filter-name>... -
跨域问题出现原因和解决方案
2017-06-09 11:09:38跨域是指a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,或是a页面为ip地址,b页面为域名地址,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域... -
什么是跨域?为什么要禁止跨域?怎样跨域?
2020-03-14 11:49:48什么是跨域 现代浏览器处于安全考虑,都会去遵守一个叫做“同源策略”的约定,同源的意思是两个地址的协议、域名、端口号都相同的情况下,才叫同源...为什么禁止跨域 跨域访问会造成很多安全问题,下面我们来看一... -
为什么 form 表单提交没有跨域问题
2020-04-14 18:53:10所以form表单提交没有跨域问题,提交form表单到另外一个域名,原来页面是无法获取新页面的内容,或者说form提交后不需要返回,但是ajax是需要返回的。 而ajax是想要读取响应内容,浏览器是不允许你这么做的。 世界... -
跨域问题详解
2022-03-11 10:40:42跨域的概念很简单,即当一个请求URL的协议、域名、端口三者之间任意一个与当前页面URL不同则视为跨域,而跨域问题产生的原因主要是由浏览器的“同源策略”限制导致的,是浏览器对JavaScript 施加的安全限制。... -
ajax 重定向跨域问题
2017-06-20 11:56:56此时会出现跨域问题。 ajax调用浏览器组件发起的请求和浏览器直接发起的请求有一定区别。 1)浏览器可以通过返回的http状态进行相应的操作,如访问一个页面,此页面重定向时,浏览器可以获取到重定向后的url... -
跨域问题的产生原因和相应的解决方式
2017-11-28 11:07:12对于完全不同源的网站,目前有三种方法,可以解决跨域窗口的通信问题。 片段识别符(fragment identifier) window.name 跨文档通信API(Cross-document messaging) 3.1 片段识别符 片段标识符(fragment ... -
为什么postman调接口不会跨域而浏览器会
2018-12-08 23:03:04为什么postman调接口不会跨域而浏览器会? 都在说跨域,为什么postman能访问接口,而浏览器就不行呢?这里需要理解什么是跨域,跨域是指的当前资源访问其他资源时发起的http请求由于安全原因(由于同源策略,域名、... -
为什么会有同源策略? 什么情况下会碰到跨域问题?有哪些解决方法?
2019-10-29 20:45:10声明一个回调函数,其函数名(如fn)当做参数值,要传递给跨域请求数据的服务器,函数形参为要获取目标数据(服务器返回的data)。 创建一个<script>标签,把那个跨域的API数据接口地址,赋值给script的src,还要在... -
什么是跨域?跨域解决方法
2018-12-14 19:22:02一、为什么会出现跨域问题 出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建... -
proxy代理解决跨域问题
2021-05-10 11:47:17首先,了解一下什么是什么跨域,为什么会出现跨域问题? 每个浏览器的URL由协议、域名、端口号;我们可以看到下面表格的一些测试URL: URL地址 协议 域名 端口号 http://exampleOne.com:8060 http example... -
Axios解决跨域问题
2021-09-13 22:35:31什么是跨域 首先需要了解到浏览器的同源策略,同源策略是最核心也是最基本的安全功能,缺少同源策略浏览器的正常功能可能会受到影响。同源策略会阻止一个域的javascript脚本和另外一个域的能容进行交互。同源(即...