Nginx解决跨域访问难题:轻松实现跨域资源共享!

点击下方关注我,然后右上角点击...“设为星标”,就能第一时间收到更新推送啦~~~

跨域资源共享(CORS,Cross-Origin Resource Sharing)是一种网络浏览器的安全功能,它限制了一个源(域、协议和端口的三元组)的web页面向另一个源请求资源。这可以防止恶意内容执行跨站请求伪造(CSRF)攻击。然而,在开发过程中,特别是在前后端分离的应用中,我们通常需要允许跨域请求。

1

跨域问题演示

ca5da30959637344e7c2010bcc6ce910.png

1、什么是跨域访问

如果2个服务器节点的协议,域名,端口有一个不同,那么这2台服务器之间互相访问就会出现跨域访问的问题,跨域限制的根本原因是浏览器的限制,浏览器为了安全从而限制跨域访问。

2、跨域示例说明

演示一:

假设Tomcat2服务器部署了一个hello.json文件,里面是一个json格式的数据,用它来模拟跨域访问问题。

hello.json内容如下:

{
"hello":"world"
}

Tomcat1服务器上的index.jsp通过一段js代码要获取到Tomcat2服务器上的hello.json内容,并通过alert输出key=hello的值world。

在Tomcat1服务器的ROOT下上传jquery-2.1.1.min.js文件,在index.jsp文件的head中增加如下代码:

<script src="jquery-2.1.1.min.js"></script>
<script>
$(function(){
$.get("http://192.168.1.10:8080/hello.json",{},function(result){
alert(result.hello);
});            
});
</script>

如下图:

8f2be74da6e72780d4eaec50a47e5d44.png

通过浏览器输入http://192.168.1.9:8080,提示“Failed to load http://192.168.1.10:8080/hello.json: No 'Access-Control-Allow-Origin' ”,说明出现了跨域访问问题

72c186bda8dc0124462e983cc575d04d.jpeg

演示二

如果我们在Tomcat1的index.jsp里通过Nginx代理获取Tomcat2服务器的hello.json文件,是否可行呢?

  1. 修改/data/program/tomcat8/webapps/ROOT目录下的index.jsp文件,把IP地址改为Nginx代理的地址

    <script src="jquery-2.1.1.min.js"></script>
    <script>
            $(function(){
                    $.get("http://192.168.1.8/hello.json",{},function(result){
                            alert(result.hello);
                    });            
            });
    </script>
  2. 修改/data/program/nginx/conf/userconf目录下的proxy.conf配置,注释掉对192.168.1.9:8080的反向代理,为了演示,让其只代理192.168.1.10:8080。

    upstream tomcat8 {
       #server 192.168.1.9:8080;
        server 192.168.1.10:8080;
    }
    
    server{
        listen 80;
        server_name localhostdomin;
        location / {
            proxy_pass http://tomcat8;
        }
        location ~* .+\.(js|css|png|svg|ico|jpg)$ {
            root static_resource;
            expires 1d;
        }
    }
  3. 重启Nginx服务器,通过浏览器输入http://192.168.1.9:8080,提示“Failed to load http://192.168.1.8/hello.json: No 'Access-Control-Allow-Origin'”,说明依然存在跨域访问问题。

2

Nginx解决跨域请求问题

ad0967a4cc5c6e109b4825011874db75.png

通过nginx的配置解决以上出现的跨域问题

再次修改/data/program/nginx/conf/userconf目录下的proxy.conf配置,通过add_header设置解决跨域访问问题

upstream tomcat8 {
   #server 192.168.1.9:8080;
    server 192.168.1.10:8080;
}

server{
    listen 80;
    server_name localhostdomin;
    location / {
        proxy_pass http://tomcat8;
        add_header 'Access-Control-Allow-Origin' '*';                
        add_header 'Access-Control-Allow-Methods' 'GET,POST,DELETE';
        add_header 'Access-Control-Allow-Header' 'Content-Type,*';
    }
    location ~* .+\.(js|css|png|svg|ico|jpg)$ {
        root static_resource;
        expires 1d;
    }
}

如下图:

546cbe58f5956fc6ff4f126ab0012536.png

保存配置,并重启Nginx服务器

通过浏览器输入http://192.168.1.9:8080,可以弹出world的值,如下:

74583acf4d23077c167918da7bd2abb2.jpeg

因此,说明通过nginx的配置,我们解决了上面的跨域访问问题,可以正常获取到Tomcat2服务器上的json资源。

注:上面的网页没有样式,是因为之前我们把Tomcat里面的静态资源挪走导致的。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

学习空间转换-3D转换

1.什么是空间转换&#xff1f; 使用的是transform属性实现元素在空间内的位移&#xff0c;旋转&#xff0c;缩放等效果。 空间&#xff1a;是从坐标轴角度定义的。x,y,z三条坐标轴构成的一个立体空间&#xff0c;Z轴位置与视线方向相同。 所以空间转换也被叫做3D转换 语法&a…

docker+awk=无敌?!

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 dockerawk无敌&#xff1f;&#xff01; 前言需求分析容器间通过容器名称访问脚本实现一键部署命令解释 前言 当今软件开发的世界充满了数据&#xff0c;而 Docker 则是许多开发者首选的容器化解决方…

嵌入式学习55-ARM4(ADC和I²C)

1、什么是ADC,模拟量和数字量有什么特点&#xff1f; ADC&#xff1a; …

GhostNetV3:探索紧凑型模型的训练策略学习笔记

代码地址&#xff08;coming soon&#xff09;&#xff1a;Efficient-AI-Backbones/ghostnetv3_pytorch at master huawei-noah/Efficient-AI-Backbones GitHub 论文地址&#xff1a;2404.11202v1.pdf (arxiv.org) 紧凑型神经网络是专门为边缘设备上的应用而设计的&#xff0…

linux离线安装mysql

一、下载mysql 地址&#xff1a;MySQL 这里选择64为还是32为要根据操作系统来 uname -m 二、上传解压配置mysql 使用root账户登录linux服务器&#xff0c;在opt文件下创建mysql文件夹 cd /opt sudo mkdir mysql 使用Xftp上传mysql压缩包到此文件夹下(自行决定路径) cd mysql/…

Unity Editor编辑器扩展之创建脚本

前言 既然你看到这篇文章了&#xff0c;你是否也有需要使用代码创建脚本的需求&#xff1f;使用编辑器扩展工具根据不同的表格或者新增的内容去创建你想要的脚本。如果不使用工具&#xff0c;那么你只能不断去修改某个脚本&#xff0c;这项工作既繁琐也浪费时间。这个时候作为程…

蓝桥杯第十五界软件测试线下省赛题目分析及解决

PS 需要第十五界蓝桥杯被测系统或者功能测试模板、单元测试被测代码、自动化测试被测代码请加&#x1f427;:1940787338 备注&#xff1a;15界蓝桥杯省赛软件测试 题目1&#xff1a;功能测试 题目描述 ​ 某物流公司的货运收费标准根据重量、距离和节假日三个因素来确定。如…

【介绍下LeetCode的使用方法】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

1.为什么选择Vue框架

参考&#xff1a;百战程序员 为什么选择Vue框架 Vue是什么&#xff1f; 渐进式 JavaScript 框架&#xff0c;易学易用&#xff0c;性能出色&#xff0c;适用场景丰富的 Web 前端框架 为什么要学习Vue Vue是目前前端最火的框架之一Vue是目前企业技术栈中要求的知识点Vue可以…

Lesson4--栈和队列

【本节目标】 1.栈 2.队列 3.栈和队列面试题 1.栈 1.1栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。 进行数据插入和删除操作的一端 称为栈顶&#xff0c;另一端称为栈底。 栈中的数据元素遵守后进先出 LIFO &…

vue快速入门(三十五)组件通信-父传子

注释很详细&#xff0c;直接上代码 上一篇 新增内容 父组件传值子组件接收父组件传来的数据 源码 App.vue <template><div id"app"><!-- :item"item"为将item的值传递给MyTest组件 --><MyTest v-for"item in roles" :key&q…

【双曲几何】圆盘上的三角形概念

目录 一、说明二、对偶三角形概念2.1 反演关系2.2 对偶关系2.3 找出三角形的对偶三角形 三、正交三角形概念3.1 通过对偶三角形&#xff0c;找到垂心3.2 正交三角形的概念3.3 中心射影点的概念 四、后记 一、说明 本文对双曲空间的三角形进行分析&#xff0c;本篇首先给出&am…

(vue)el-select选择框加全选/清空/反选

(vue)el-select选择框加全选/清空/反选 <el-form-item label"批次"><el-selectv-model"formInline.processBatch"multiplecollapse-tagsfilterableplaceholder"请选择"style"width: 250px"no-data-text"请先选择企业、日…

基于docker的开发者集成环境

docker-compose一键部署开发者环境。 常见的中间件&#xff1a;nginx, mysql, redis, mongo, rabbitmq, nacos, rocketmq, zookeeper等。 GIthub项目地址 1. 下载项目&#xff1a;git clone https://github.com/xhga/docker-develop-env.git 2. 进入文件夹&#xff1a;cd d…

实例分割——苹果数据集

一、重要性及意义 重要性&#xff1a; 提升农业生产效率&#xff1a;通过自动化检测和分割技术&#xff0c;可以快速准确地识别出图像中的苹果&#xff0c;进而实现自动化的采摘、计数和品质评估。这极大地提高了农业生产的效率&#xff0c;减少了人工劳动成本。 优化资源配置…

【网站项目】高校毕业论文管理系统小程序

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

力扣:LCR 022. 环形链表 II

力扣&#xff1a;LCR 022. 环形链表 II 给定一个链表&#xff0c;返回链表开始入环的第一个节点。 从链表的头节点开始沿着 next 指针进入环的第一个节点为环的入口节点。如果链表无环&#xff0c;则返回 null。 为了表示给定链表中的环&#xff0c;我们使用整数 pos 来表示链…

为了机器学习量化策略,我标注了两万条数据

题图&#xff1a;芝加哥大学海德公园。芝大是经济学重镇&#xff0c;其学者开创了著名的芝加哥经济学派&#xff0c;共产生了 100 位诺奖、10 位菲尔兹奖、4 位图灵奖。今天量化人追逐的 Alpha&#xff0c; 最早就来自于 Michael Jessen 在芝大时的博士论文。 很多人对基于机器…

Git - 在PyCharm/Idea中集成使用Git

文章目录 Git - 在PyCharm/Idea中集成使用Git1.新建GitHub仓库2.将仓库与项目绑定3.在PyCharm中使用Git4.新建Gitee仓库5.将仓库与项目绑定6.在IDEA中使用Git Git - 在PyCharm/Idea中集成使用Git 本文详细讲解了如何在 PyCharm 或 Idea 中配置 Gitee 或 GitHub 仓库&#xff0…

稀碎从零算法笔记Day53-LeetCode:不同路径 II

稀碎系列有点更不动(更多是自己懈怠了) 题型&#xff1a;矩阵、模拟 链接&#xff1a;63. 不同路径 II - 力扣&#xff08;LeetCode&#xff09; 来源&#xff1a;LeetCode 题目描述 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &…