最常见五种跨域解决方案 _生活知道

严格来讲，跨域其实并不是一种问题，而是一种网络调用的安全策略。在浏览器中有一种策略方式叫做同源策略，这也就规定了有一部分请求是不能被浏览器所接受的，也就是说同源策略的跨域是因为浏览器不接受而造成的，并不是说服务端对请求没有做出响应。
什么是同源策略？
一般来讲我们使用的URL被分为的三个部分：协议、域名、端口。只有当三者都一致的时候，才被称为是同源。在同源策略中规定，之后发送请求的一边和接受请求的一边处于同源的情况下，浏览器才会接收到响应。如下几种
发送请求地址:http:192.168.1.200:8080/index接受请求地址:http:192.168.1.200:8081/index //不同源端口不同发送请求地址:http:192.168.1.201:8080/index接受请求地址:http:192.168.1.200:8080/index //不同源 ip不同发送请求地址:http:192.168.1.200:8080/index接受请求地址:https:192.168.1.200:8080/index //不同源协议不同发送请求地址:http:192.168.1.200:8080/index接受请求地址:http:192.168.1.200:8080/login //同源协议，端口，ip都相同，路径不同无所谓
那么如何去解决跨域问题呢？下面我们就来详细介绍一下常见的几种跨域解决方案。
JQuery 的Ajax 请求
在JQuery中自带了Ajax的跨域请求解决方案，其底层原理是使用JSONP来解决。如下所示。
$.ajax({url: 'http://192.168.1.200:8080/login',type: 'get',dataType: 'jsonp',// 请求方式为jsonp设置跨域的重点jsonpCallback: "callBack",// 回调函数});
在JQuery项目中这是一种比较常见的解决方案。
使用script标签解决跨域问题
在一些老旧项目中，没有使用到JQuery ，为了解决跨域问题，采用了script标签来实现跨域解决方案。如下。
<script>// 回调function callBack(res) {console.log("跨域的回调",res);// …完成你所有操作后记得删除script↓document.head.getElementsByClassName("script")[0].remove();}const scriptDom = document.createElement('script');scriptDom.type = 'text/javascript';scriptDom.class = 'script'; //用于删除// 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数scriptDom.src = https://www.30zx.com/'http://192.168.1.200:8080/inface?callback=callBack';document.head.appendChild(script); //将标签挂载到dom上
这里需要注意的是，在使用完成之后需要删除script，否则越来越多的script标签就会随着请求挂载到DOM上。但是这种方案不建议使用。
使用前端代理
在每个框架中对于代理的设置是不一样的，但是不变的是他们都有一个配置文件，并且都会有一个proxy的字段来控制前端代理。所以我们可以在代理中对其跨域问题进行设置，这样，在调用的时候就不会出现前端跨域的情况。
使用Nginx来解决跨域
Nginx是现在使用比较多的服务器代理，在它的配置中也提供了服务端跨域解决方案。如下所示。
#如果监听到请求接口地址是 192.168.1.200/api/page ，#nginx就向 http://192.168.1.201:9999/api/page这个地址发送请求server {listen80;server_namewww.xxx.com;#判过滤出含有api的请求location /api/ {proxy_pass http://192.168.1.201:9999; #真实服务器的地址}}
我们知道Nginx是一个反向代理服务器，所以我们只需要保证Nginx与请求的同源策略，反向代理的通过接口调用的方式，所以可以直接使用这种配置方式。
增加逻辑层处理代码
简单的讲就是在代码中添加对应的配置项就可以解决跨域问题。
Access-Control-Allow-Origin：意思是安全通行请求。举个例子 http://192.168.1.200:8080 向http://192.168.1.201:8080 发送了请求，结果因为域名不一样，在返回信息的时候因为IP地址不一致被拦截。
但是如果http://192.168.1.200:8080 在响应头中的 Access-Control-Allow-Origin 字段中携带上属性值'http://192.168.1.201:8080' 如下
//响应头Access-Control-Allow-Origin':'http:/ /192.168.1.201:8080'
这就相当于告诉浏览器 http://192.168.1.200:8080 地址是安全的不要拦截。当然我们还可以通过设置如下的方式来进行所有域名不拦截配置。
//响应头// * 代表所有域名均不拦截Access-Control-Allow-Origin':'*'总结
【最常见五种跨域解决方案】在Spring Boot项目中，通常会使用一个配置文件的方式来解决跨域问题。以上的几种方式都是在日常开发中常用到的方式。但是也有一些不推荐的使用方式，例如使用script的方式，使用设置请求头的方式，当然设置请求的方式在测试的时候可以使用，但是在实际线上的过程中就不建议使用。
以上就是朝夕生活（www.30zx.com）关于“最常见五种跨域解决方案”的详细内容，希望对大家有所帮助！

最常见五种跨域解决方案

猜你喜欢