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

news/2024/5/20 1:55:10/文章来源: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")@ResponseBodypublic 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: .jspapplication: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: .jspapplication: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-apath: /api-a/**serviceId: web-aapi-b:### 以 /api-b/访问转发到web-bpath: /api-b/**serviceId: web-b

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.luyixian.cn/news_show_774354.aspx

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

互联网公司都在用什么语言写网站后端？

互联网公司都在用什么语言写网站后端？

2019独角兽企业重金招聘Python工程师标准>>> 豆瓣 python 淘宝 php 百度 php python 优酷 java php 谷歌 python youtube python facebook php wikipedia php twitter ruby 看来php和python平分秋色&…
阅读更多...
开发高性能网站的web性能测试工具

开发高性能网站的web性能测试工具

开发高性能网站的web性能测试工具文章分类:Web前端 WEB性能测试工具主要分为三种&#xff0c;一种是测试页面资源加载速度的&#xff0c;一种是测试页面加载完毕后页面呈现、JS操作速度的&#xff0c;还有一种是总体上对页面进行评价分析&#xff0c;下面分别对这些工具进行介绍…
阅读更多...
网站访问流程

网站访问流程

(点击查看大图)网站的架构如上图所示&#xff0c;下面将分析从用户在浏览器输入访问一个域名&#xff0c;例如www.yy.com&#xff0c;到页面全部展示出来经过的所有流程。(1)用户在浏览器地址栏输入www.yy.com或者yy.com(2)此时系统将检查缓存(这里的缓存包括浏览器缓存、操作系…
阅读更多...
60款高质量的网站模板免费下载（上篇）

60款高质量的网站模板免费下载（上篇）

您可能还喜欢 分享45款高质量的免费(X)HTML/CSS模板最新30佳精美 PSD 网站模板免费下载寻找网页设计灵感的27个最佳网站推荐60佳灵感来自大自然的网页设计作品欣赏分享100佳精美的作品集网站设计案例当你想快速制作出一个网站的时候&#xff0c;网站模板就非常有用了。学习网页…
阅读更多...
50款高质量的网站PSD模板免费下载（第一季）

50款高质量的网站PSD模板免费下载（第一季）

今天开始推出系列文章向大家分享50款高质量的网站PSD模板&#xff0c;您可以免费下载使用。这些现成的PSD模板可以让您的工作得心应手&#xff0c;帮助您节省大量的时间和精力。感谢那些优秀的设计师分享他们的劳动成果&#xff0c;让更多的人可以使用他们的创意设计&#xff0…
阅读更多...
java电脑过滤网站_Java过滤器Filter讲解（Java基础）

java电脑过滤网站_Java过滤器Filter讲解（Java基础）

你好我是辰兮&#xff0c;很高兴你能来阅读&#xff0c;本篇文章小结了Java过滤器的知识点&#xff0c;献给初学者&#xff0c;分享获取新知&#xff0c;希望我们一起进步。文章目录一、什么是过滤器二、如何编写过滤器三、 过滤器的配置四、Filter的生命周期五、多个Filter的执…
阅读更多...
iis 一个域名 带斜杠的配置_零基础建站如何配置PHP运行环境 几种服务器环境配置的选择和方法...

iis 一个域名 带斜杠的配置_零基础建站如何配置PHP运行环境 几种服务器环境配置的选择和方法...

上次给大家分享了小白建站如何选择虚拟空间及服务器&#xff0c;及购买域名的基础知识&#xff0c;这些是硬性要求&#xff0c;你的网站要想运行起来&#xff0c;硬件只是基础&#xff0c;真正的技术是软件&#xff0c;关于PHP软件开发技术&#xff0c;后面我们会慢慢的分享给大…
阅读更多...
3月第二周域名主机网站排名 万网第一西部数码第二

3月第二周域名主机网站排名 万网第一西部数码第二

据国际统计机构Alexa公布的最新数据显示&#xff0c;3月第二周&#xff08;3月5日-3月11日&#xff09;&#xff0c;中国万网网站用户覆盖数达1860&#xff0c;以绝对优势高居榜首。 西部数码次之&#xff0c;达710。易名中国排名第三&#xff0c;为600。下面&#xff0c;IDC评…
阅读更多...
研究了100个自学网站，我总结出了这份Java学习资料！

研究了100个自学网站，我总结出了这份Java学习资料！

这份Java资源中包括&#xff1a; Java、面向对象、多态、接口、IDEA、异常、集合框架、IO流、多线程、企业级框架、HTML、数据库、Java web、项目实战、GitHub、Spring、多线程、JVM、集合、多线程、MyBatis、MySQL、Git、IDEA、Redis、算法、简历模板、高频面试题、技术书籍、…
阅读更多...
作为程序员，我都逛了哪些技术网站？(收藏篇)

作为程序员，我都逛了哪些技术网站？(收藏篇)

目录 一、在线教程 二、视频教程 1、图灵社区 四、官网 五、国内博客社区 七、小微型博客 八、开源社区 九、面试刷题 一、在线教程 首先列出一些在线教程网站&#xff0c;这些在线教程网站通常都比较适合入门&#xff0c;可以作为开发学习路上的第一个阶梯&#xff0c;…
阅读更多...
Android如何使用WebView访问https的网站

Android如何使用WebView访问https的网站

2019独角兽企业重金招聘Python工程师标准>>> Android中可以用WebView来访问http和https的网站&#xff0c;但是默认访问https网站时&#xff0c;假如证书不被Android承认&#xff0c;会出现空白页面&#xff0c;且不会有任何提示信息&#xff0c;这时我们必须加多一…
阅读更多...
大型网站技术架构的演进

大型网站技术架构的演进

最近我在阅读2本关于大型网站架构的书&#xff1a;《大型网站技术架构——核心原理与案例分析》李智慧、《大型网站系统与Java中间件实践》曾宪杰。我期望从这些书中学习到大型网站是如何做架构的&#xff0c;这个过程会遇到什么问题。当看完这2本书后&#xff0c;我总结出两个…
阅读更多...
第一次部署asp.net网站

第一次部署asp.net网站

在VS中将项目发布到指定文件夹 在IIS中添加网站&#xff0c;填写配置信息 然后在hosts文件中将ip与域名关联起来 hosts文件位置&#xff1a;g:\windows\system32\drivers\etc 末尾调试的时候提示出错&#xff0c;是因为应用程序池应该选择ASP.NET V4.0&#xff0c;因为VS中默认…
阅读更多...
精美网站设计：25个以全屏照片为背景的网页作品

精美网站设计：25个以全屏照片为背景的网页作品

高质量的照片能够给网站带来强烈的视觉冲击力&#xff0c;不仅能够增强设计的美感&#xff0c;还可以突出网站的主题。在使用这种大照片作为网站背景的时候&#xff0c;为了能够和网站的其它内容很好的融合在一起&#xff0c;你需要考虑很多事情&#xff0c;否则可能会导致网站…
阅读更多...
帮助你在不同尺寸屏幕下浏览网站效果的工具 - Responsivator

帮助你在不同尺寸屏幕下浏览网站效果的工具 - Responsivator

为什么80%的码农都做不了架构师&#xff1f;>>> 日期&#xff1a;2012-11-1 来源&#xff1a;GBin1.com 如果你需要开发响应式的网站的话&#xff0c;使用一个必要的浏览工具来检验不同尺寸屏幕下显示效果还是非常有用的&#xff0c;相信你肯定还记得我们以前给大…
阅读更多...
dedecms 如何调用多个不同栏目的文章_如何高效率的优化网站关键词排名？

dedecms 如何调用多个不同栏目的文章_如何高效率的优化网站关键词排名？

把想要达到排名的关键词做到合理位置&#xff0c;seo就成功了一大半&#xff0c;更高效率的优化网站关键词排名&#xff0c;是站长的终极目标。如果消耗的时间成本更久&#xff0c;资源成本更多&#xff0c;那么做seo是不划算的。单位时间内产生的效益更好&#xff0c;我们才能…
阅读更多...
提高网站打开速度的7大秘籍

提高网站打开速度的7大秘籍

很多站长使用虚拟主机来做网站&#xff0c;网页内容一旦很多&#xff0c;网站打开速度就会特别慢&#xff0c;如果说服务器、带宽、CDN这类硬指标我们没有经济实力去做&#xff0c;不妨通过网页代码优化的方式来提高速度&#xff0c;卢松松总结了一些可行性的方法。 1: 缩小Jav…
阅读更多...
Wordpress主题和网站设计开发手册和资源

Wordpress主题和网站设计开发手册和资源

日期&#xff1a;2013-3-19 来源&#xff1a;GBin1.com 如果你希望开始运营和发布自己的第一个网站的话&#xff0c;找到一个合适的CMS或者免费平台的话&#xff0c;绝对是关键的一步&#xff0c;通常大家可能都会选择wordpress&#xff0c;因为它是最流行的搭建网站的框架和产…
阅读更多...
【原创】免费申请SSL证书【用于HTTPS，即是把网站从HTTP改为HTTPS，加密传输数据，保护敏感数据】...

【原创】免费申请SSL证书【用于HTTPS，即是把网站从HTTP改为HTTPS，加密传输数据，保护敏感数据】...

今天公司有个网站需要改用https访问,所以就用到SSL证书.由于沃通(以前我是在这里申请的)暂停了免费的SSL证书之后,其网站推荐了新的一个网站来申请证书,所以,今天因为刚好又要申请一个证书,所以,我就到这个网站申请了证书,趁着有一点点小空隙的时间,然后最近也没新写博文了,有些…
阅读更多...
大型网站的性能

大型网站的性能

本文转载出处&#xff1a;http://www.csdn.net/article/2015-02-26/2824026?reload1作者李平什么是性能 有人说性能就是访问速度快慢&#xff0c;这是最直观的说法&#xff0c;也是用户的真实体验。一个用户从输入网址到按下回车键&#xff0c;看到网页的快慢&#xff0c;这就…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 广利置业