分布式解决方案-解决网站跨域请求

最新推荐文章于 2021-09-18 17:06:27 发布
最新推荐文章于 2021-09-18 17:06:27 发布
阅读量421 收藏 2
点赞数 2
分类专栏： 分布式 互联网安全架构 架构师学习 文章标签： 分布式方案 网站跨域
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39380737/article/details/106968193
版权

1.什么是网站跨域

        跨域原因产生：在当前域名请求网站中，默认不允许通过ajax请求发送其他域名。
        两个项目之间使用ajax(前端类似后端的httpclient)实现通讯，如果浏览器访问的域名和端口与ajax请求访问的地址不一样的情况下，默认情况下浏览器会有安全机制，这个机制跨域问题，会无法获取返回结果。
原理图：
在这里插入图片描述

2.环境准备

2.1 配置hosts的域名

127.0.0.1      a.learn.com
127.0.0.1      b.learn.com

2.2 跨域问题复现
A项目接口

   @RequestMapping("/aIndexJsp")
    public String aIndexJsp() {
        return "aIndexJsp";
    }

A项目jsp

<script type="text/javascript">
	$(document).ready(function() {
		$.ajax({
			type : "GET",
			async : false,
			url : "http://b.learn.com:8081/getBInfo",
			dataType : "json",
			success : function(data) {
				alert(data["retCode"]);
			},
			error : function() {
				alert('fail');
			}
		});

	});
</script>

B项目接口

@RequestMapping("/getBInfo")
public Map<String, Object> getBInfo(HttpServletResponse response) {
	Map<String, Object> result = new HashMap<String, Object>(10);
	result.put("retCode", "200");
	result.put("retMsg", "登陆成功");
	return result;
}

2.3跨域问题
在这里插入图片描述
**说明：**跨域问题只是没办法拿到响应，跨域问题只存在前端，但是ajax地址拿到浏览器中是可以拿到响应的。

3.五种网站跨域解决方案

3.1.使用jsonp解决网站跨域

A前端代码

<script type="text/javascript">
	$(document).ready(function() {
		$.ajax({
			type : "GET",
			async : false,
			url : "http://b.learn.com:8081/getBInfo",
			dataType : "jsonp",
			//服务端用于接收callback调用的function名的参数
            jsonp : "jsonpCallback",
			success : function(data) {
				alert(data["retCode"]);
			},
			error : function() {
				alert('fail');
			}
		});

	});
</script>

B项目接口

/**
 * 该接口提供给A项目基于jsonp进行ajax调用
 * @param response response
 * @return map
 */
@RequestMapping(value = "/getBInfo", method = RequestMethod.GET)
public void ajaxB(HttpServletResponse response, String jsonpCallback) throws IOException {
	JSONObject root = new JSONObject();
	root.put("retCode", "200");
	root.put("errorMsg", "登陆成功");
	response.setHeader("Content-type", "text/html;charset=UTF-8");
	PrintWriter writer = response.getWriter();
	writer.print(jsonpCallback + "(" + root.toString() + ")");
	writer.close();
}

效果演示：
请求： jsonp传递随机数
在这里插入图片描述
响应：响应的时候返回随机数
在这里插入图片描述
缺点：不支持post请求，代码书写比较复杂

3. 2.使用HttpClient内部转发

A前端代码

<!-- 基于httpclient请求 -->
 <script type="text/javascript">
	$(document).ready(function() {
		$.ajax({
			type : "GET",
			async : false,
			url : "http://a.learn.com:8080/getBInfo",
			dataType : "json",
			success : function(data) {
				alert(data["retCode"]);
			},
			error : function() {
				alert('fail');
			}
		});

	});
</script>

A接口

   // 使用HttpClient进行方法B接口
    @RequestMapping("/getBInfo")
    @ResponseBody
    public JSONObject forWardB() {
        JSONObject result = HttpClientUtils.httpGet("http://b.learn.com:8081/getBInfo");
        return result;
    }

B项目接口

@RequestMapping("/getBInfo")
public Map<String, Object> getBInfo(HttpServletResponse response) {
	Map<String, Object> result = new HashMap<String, Object>(10);
	result.put("retCode", "200");
	result.put("retMsg", "登陆成功");
	return result;
}

效果演示：
在这里插入图片描述
缺点：内部转发，相当于两次请求
3. 3.使用设置响应头允许跨域
A前端代码

<!-- 正常请求 -->
 <script type="text/javascript">
	$(document).ready(function() {
		$.ajax({
			type : "GET",
			async : false,
			url : "http://b.learn.com:8081/getBInfo",
			dataType : "json",
			success : function(data) {
				alert(data["retCode"]);
			},
			error : function() {
				alert('fail');
			}
		});

	});
</script>

B项目

/**
	 * 该接口提供给A项目设置请求头进行ajax调用
	 *
	 * @param response response
	 * @return map
	 */
    @RequestMapping("/getBInfo")
    public Map<String, Object> getBInfo(HttpServletResponse response) {
//		 告诉客户端（浏览器 ）允许跨域访问 *表示所有域名都是可以 在公司中正常的代码应该放入在过滤器中
        response.setHeader("Access-Control-Allow-Origin", "*");
        Map<String, Object> result = new HashMap<String, Object>();
        result.put("retCode", "200");
        result.put("retMsg", "登陆成功");
        return result;
    }
3. 4.基于Nginx搭建企业级API接口网关

nginx配置：

server {
        listen       80;
        server_name  api.learn.com;	
		#charset utf-8;
        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location /a/ {
		    proxy_pass   http://a.learn.com:8080/;
			###nginx与上游服务器(真实访问的服务器)超时时间 后端服务器连接的超时时间_发起握手等候响应超时时间
			#proxy_connect_timeout 1s;
			###nginx发送给上游服务器(真实访问的服务器)超时时间
            #proxy_send_timeout 1s;
			### nginx接受上游服务器(真实访问的服务器)超时时间
            #proxy_read_timeout 1s;
            #root   data/www;
            index  index.html index.htm;
        }


		location /b/ {
		    proxy_pass   http://b.learn.com:8081/;
			###nginx与上游服务器(真实访问的服务器)超时时间 后端服务器连接的超时时间_发起握手等候响应超时时间
			#proxy_connect_timeout 1s;
			###nginx发送给上游服务器(真实访问的服务器)超时时间
            #proxy_send_timeout 1s;
			### nginx接受上游服务器(真实访问的服务器)超时时间
            #proxy_read_timeout 1s;
            #root   data/www;
            index  index.html index.htm;
        }

A前端代码：

 <script type="text/javascript">
	$(document).ready(function() {
		$.ajax({
			type : "GET",
			async : false,
			url : "http://api.learn.com/b/getBInfo",
			dataType : "json",
			success : function(data) {
				alert(data["retCode"]);
			},
			error : function() {
				alert('fail');
			}
		});

	});
</script>

B项目：

  /**
     * 该接口提供给A项目正常进行ajax调用
     *
     * @param response response
     * @return map
     */
    @RequestMapping("/getBInfo")
    public Map<String, Object> getBInfo(HttpServletResponse response) {
        Map<String, Object> result = new HashMap<String, Object>(10);
        result.put("retCode", "200");
        result.put("retMsg", "登陆成功");
        return result;
    }

/a/ 和/b/以项目区分，利用nginx反向代理
效果演示：
在这里插入图片描述
3.5.使用Zuul搭建微服务API接口网关
注册中心不再演示
3.5.1 A项目改造成微服务
A项目前端代码

<!-- 正常请求 -->
 <script type="text/javascript">
	$(document).ready(function() {
		$.ajax({
			type : "GET",
			async : false,
			url : "http://127.0.0.1/api-b/getBInfo",
			dataType : "json",
			success : function(data) {
				alert(data["retCode"]);
			},
			error : function() {
				alert('fail');
			}
		});

	});
</script>

A配置文件

server:
  port: 8080
spring:
  mvc:
    view:
      prefix: /WEB-INF/jsp/
      suffix: .jsp
  application:
    name: web-a
eureka:
  client:
    serviceUrl:
      defaultZone: http://localhost:8100/eureka/

3.5.2 B项目改造成微服务
B的配置文件

server:
  port: 8081
spring:
  mvc:
    view:
      prefix: /WEB-INF/jsp/
      suffix: .jsp
  application:
    name: web-b
eureka:
  client:
    serviceUrl:
      defaultZone: http://localhost:8100/eureka/

3.5.3 网关配置文件

###注册 中心
eureka:
  client:
    serviceUrl:
      defaultZone: http://localhost:8100/eureka/
server:
  port: 80
###网关名称
spring:
  application:
    name: service-zuul
#### 配置网关反向代理    
zuul:
  routes:
    api-a:
     ### 以 /api-a/访问转发到web-a
      path: /api-a/**
      serviceId: web-a
    api-b:
        ### 以 /api-b/访问转发到web-b
      path: /api-b/**
      serviceId: web-b

效果演示：通过网关路由到了web-a服务的jsp页面，然后调用http://127.0.0.1/api-b/getBInfo，通过路由调用web-b服务的接口
在这里插入图片描述

机智的豆子
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
详解vue-cli3 中跨域解决方案
12-01
此方案只能用于开发环境，线上最好设置同源策略（遇到个后端,装你妈批） 前后端不在同一服务器的情况下，前端要访问后端API，可通过在vue.config.js中配置代理服务器。 0：前提条件 1：安装vue-lic 2：安装axios ...
分布式解决方案( 跨域问题的解决)
全村最靓的仔
06-09 2126
本文主要介绍由分布式系统带来的各种跨域问题的解决方案。(本文只涉及少量代码，仅提供解决方案) 1.什么是跨域问题? 两个项目之间使用ajax实现通讯，如果浏览器的访问的域名地址和ajax访问的地址不一样，那么浏览器的默认安全机制会阻止此请求，导致无法获取返回结果。关于什么具体的原因，这里不做描述。 2.如何解决跨域问题? 1.使用jsonp，一般会前端的小伙伴都应该知道怎么配置(缺点...
分布式跨域解决
Mycainao_Gao的博客
07-30 269
在前面的坑中，已经能成功拿到验证码了。但是在点击登陆的时候出现了服务器被拒，原因是服务器不支持JS的ajax跨域请求 前端发送请求是有两次，第一次是预检请求，目的是问服务器能不能跨域。第二次请求是在服务器允许跨域后才会发送第二次真实的请求给服务器 ** 跨域的解决方式一 ** 用nginx部署在同一域，利用nginx反向代理。 ** 跨域的解决方式二 ** 在网关中统一配置：添加响应头 ...
65-分布式解决方案-彻底解决网站跨域请求
YHJ
05-30 259
1. 什么是跨域问题 2. 跨域问题产生的原因 浏览器跨域问题产生的原因，如果使用ajax请求调用第三方接口，如果ajax访问的接口域名和端口号与浏览器访问的域名和端口号不一致的情况下，就会产生跨域问题（属于浏览器安全策略）跨域不属于前端问题 一定要端口号和域名一定要保持一致 3. 跨域问题解决方案 使用jsonp解决跨域问题 （不推荐 因为只能支持get请求 不支持post请求） 使用HttpClient进行转发（不推荐， 因为效率非常低，会发送两次请求） 设置响应头允许跨域（可以推荐，适
分布式解决方案 -- 跨域问题解决
ZUIHENderen46的博客
10-15 381
网站跨域解决方案 什么是网站跨域 跨域原因产生：在当前域名请求网站中，默认不允许通过ajax请求发送其他域名。由于浏览器的同源策略导致 五种网站跨域解决方案 1.使用jsonp解决网站跨域 缺点：不支持post请求，代码书写比较复杂 2.使用HttpClient内部转发 3.使用设置响应头允许跨域 response.setHeader(“Access-Control-Allow-Origin”, “*”); 设置响应头允许跨域 如果在实际项目中，该代码建议放在过滤器中。 4.基于Nginx搭建企业级API接
前端跨域问题复现代码
qq_39630624的博客
09-18 148
直接引用，修改接口地址及传参即可 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <ti
Vue项目中跨域问题解决方案
01-19
使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建） Jquery jsonp 后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET')...
Ajax跨域请求解决方案-JSONP
12-03
该资源为ASP.NET网站开发技术中使用Ajax进行跨域请求时利用JSONP方案解决浏览器同源策略限制的源码，比较简单，仅供参考
Vue跨域请求问题解决方案过程解析
11-19
二、解决上面跨域问题：根目录写入以下vue.config.js // vue.config.js module.exports = { devServer: { proxy: { // 配置跨域 '/api': { target: 'http://iwenwiki.com', ws: true, changOrigin: true, ...
分布式之跨域解决
真是呆子啊的博客
09-20 1215
一、初探 1、同源策略：阻止一个域的javascript脚本和另外一个域的内容进行交互。同源（即指在同一个域）就是两个页面具有相同的协议（如都是http），域名（如都是www.cat.com，二级域名也不行）和端口号（如都是8080） 2、跨域：一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同 http://www.cat.com:8080/user 和http://w...
分布式项目跨域请求的四种方式
Mojito Blogs
12-26 1827
方式1 使用jsonp跨域请求 方式2 使用@crossorigin 注意:该注解,在sprin框架4.2及4.2后才有,经过测试5.0中fastjson和@spring框架冲突,降低spring版本即可解决 方式3: 使用httpclient的API,进行跨域请求 方式4: 使用服务间的依赖(这种方式,没有测试通过,谁通过了,麻烦告诉我一声) ps:仅仅是总结 ...
10蚂蚁-分布式解决方案——4.彻底解决网站跨域请求
qq_28461661的博客
10-22 226
网站跨域解决方案 只有前段才会产生跨域问题（跨域属于浏览器问题） 什么是网站跨域 跨域原因产生：在当前域名请求网站中，默认不允许通过ajax请求发送其他域名。 网站跨域报错案例 jquery-1.7.2.min.js?t=2017-07-27:4 Failed to load http://b.itmayiedu.com:8081/ajaxB: No ‘Access-Control-Allow-O...
分布式系统中的跨域问题及解决方案
朝立的博客
07-01 511
参考:https://blog.csdn.net/weixin_42036952/article/details/88564647
分布式系统跨域调用问题
bobo
01-29 2073
     在分布式系统中， 大部分在后台做远程调用， 从hession,到dubbo、dubbox , spring cloud 等，所以前台感觉不到跨域问题， 但是有些特殊要求，需要做前端远程调用 从A系统调用B系统页面，在这里不考虑权限问题 ，因为某些系统单点、授权等方式。 调用方式：  1、ajax ,    大部分人用jquery 做为基础框架，那么以jquery 为基础。 直...
解决分布式Session跨域共享问题
大洋孩的博客
04-24 864
       整理之前自己的笔记，只写大题思路。        第一种：粘性session，将用户总是分到某台服务器。（简单不需要对session做处理，缺乏容错性，当前服务器异常服务器上所有session都失效） 第二种：服务期间session复制：利用服务器进行session的复制，广播到所有服务器节点（缺点：对网络和内存造成压力） 第三种：持久化到数据库（访问量大的时候数据库压力大） 第四种...
Redis实战和核心原理详解（6）使用Spring Session和Redis解决分布式Session跨域共享问题
热门推荐
徐刘根的博客
02-26 7万+
前言对于分布式使用Nginx+Tomcat实现负载均衡，最常用的均衡算法有IP_Hash、轮训、根据权重、随机等。不管对于哪一种负载均衡算法，由于Nginx对不同的请求分发到某一个Tomcat，Tomcat在运行的时候分别是不同的容器里，因此会出现session不同步或者丢失的问题。实际上实现Session共享的方案很多，其中一种常用的就是使用Tomcat、Jetty等服务器提供的Session共享
跨域问题的复现与整理
Sp4rkW的博客
08-01 3068
知乎：Sp4rkW GITHUB：Sp4rkW B站：一只技术君 博客：https://sp4rkw.blog.csdn.net/ 联系邮箱：[email protected] 文章目录一、同源策略1、同源策略的定义2、什么是同源3、同源策略在保护什么二、环境搭建1、服务器配置2、宝塔站点安装配置三、同源策略限制js演示1、基于iframe引入页面的dom操作1.1、相同ip相同端口1.2、不同ip1.3、相同ip不同端口2、ajax跨域操作2.1、相同ip2.2、不同ip四、实际挖掘漏洞中可能遇到的跨域漏
react-native-web 网络请求跨域问题解决
最新发布
07-14
在 React Native 中使用 `fetch` 进行网络请求时，遇到跨域问题可以通过以下几种方式解决： 1. 使用 `proxy` 代理：在开发环境中，可以在 `package.json` 文件中的 `scripts` 部分添加一个 `proxy` 字段，指定代理...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值