nginx解决跨域问题

article/2025/9/20 1:04:20

    在我们前端开发的过程中, 相信大家都遇到过一个让人头疼的问题,那就是跨域问题.

    跨域解决的方式有很多,这里主要讲的是如何来使用 nginx来解决我们所遇到的跨域问题

    首先,在我们开始之前,首先要知道跨域是如何产生的:

           协议

           ip

           端口号

这三者有任何一个不同,就会产生跨域问题

    了解了跨域的产生,接着我们就来看看,如何解决它

一.下载nginx

      下载地址:   http://nginx.org/en/download.html

      如图所示, 选择相应的版本,进行下载

下载完成后,选择任意位置进行解压,不需要安装

解压完成后,进入nginx的目录,输入命令 nginx -v 如果能够出现版本,则说明成功,如图:

二. nginx反向代理解决跨域问题

    在这里,我们使用ajax来做请求,然后node+express来写后台

    前端代码如下所示:

   

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script></head>
<body><button>点击</button><script>// 给button添加点击事件$('button').click(function(){$.ajax({url:'http://localhost:3000/user/find',success:function(r){console.log(r)},error:function(e){console.log(e)}})})</script>
</body>
</html>

后端代码,如下所示:

    使用前,需要安装express   npm install express

let express = require('express')
// 创建应用
let app = express()// get请求
app.get('/user/find',(req,res)=>{res.send('hello')
})// 启动服务,监听端口
app.listen(3000,()=>{console.log('启动成功...')
})

然后开启node服务

这个时候,如果打开页面访问接口,会出现跨域报错,如下图所示:

注意,打开文件的时候一定要在服务中打开,不要使用绝对路径打开

 

 

接着就是配置nginx文件,解决这个跨域问题

   反向代理的意思就是把前端的地址和后端的地址 使用nginx转换到相同的地址下,如把上面的node服务3000端口 和 网页打开的服务5500端口都转换到 nginx的8000端口下

   具体配置如下:

        打开nignx底下conf文件夹,在conf文件夹中有一个nginx.conf 文件,更改配置如下

server {listen       8000;server_name  localhost;# / 表示匹配路径为/的urllocation / {proxy_pass http://localhost:5500;}# /user 表示访问以/user 开头 的地址 如/username,/user/find等location /user {proxy_pass http://localhost:3000;}}

注意, listen那里不要使用node服务的3000,之前我是想着直接监听node的服务端口,应该是可以的,可是这样会占用3000接口,导致node服务启动不了

上面代码的意思是,把访问localhost:8000 转换成访问 localhost:5500,而访问localhost:8000/user... 则转换成localhost:3000/user

配置完成之后需要在终端中,使用 nginx -s reload 更新我们的配置

启动nginx的命令是 start nginx

 

然后,把前端代码的请求地址修改一下,此时前端访问的就不再是node的服务了,而是要访问nginx, 然后通过nginx做响应的转发

 

 // 给button添加点击事件$('button').click(function(){$.ajax({url:'http://localhost:8000/user/find',success:function(r){console.log(r)},error:function(e){console.log(e)}})})

在浏览器中访问的也不再是localhost:5500了,而是localhost:8000,原因,已经在上方解释过了

这样就不会出现跨域问题了,这就是反向代理

 

希望本篇文章,能够对您有所帮助,欢迎批评指正!

 


http://chatgpt.dhexx.cn/article/BtfgrsG0.shtml

相关文章

Axios解决跨域问题

什么是跨域 首先需要了解到浏览器的同源策略&#xff0c;同源策略是最核心也是最基本的安全功能&#xff0c;缺少同源策略浏览器的正常功能可能会受到影响。同源策略会阻止一个域的javascript脚本和另外一个域的能容进行交互。同源&#xff08;即指在同一个域&#xff09;就是两…

跨域问题的4种解决方案

更多内容&#xff0c;请访问我的 个人博客。 前言 难以置信&#xff0c;我居然被跨域问题折磨了一上午。相信很多程序员都遇到过跨域问题&#xff0c;当然&#xff0c;解决方案也有很多种。但我今天尝试了无数种办法&#xff0c;依旧没有解决。直到最后我媳妇儿给了我个提示&a…

跨域问题常用的三种解决方式

一、什么是跨域?跨域是如何产生的? 同源策略: 浏览器内置的规则&#xff01;是浏览器提供的一种安全机制&#xff0c;限制来自不同源的数据。如果当前页面的URL地址和Ajax的请求地址不同源&#xff0c;浏览器不允许得到服务器的数据&#xff1b; 同源: 协议 http||https、域…

完全二叉树的节点数

目录 Leecode.222完全二叉树的节点数思路分析层序遍历_迭代递归_二叉树的遍历迭代_二叉树的遍历 Leecode.222完全二叉树的节点数 给你一棵 完全二叉树 的根节点 root &#xff0c;求出该树的节点个数。 完全二叉树 的定义如下&#xff1a;在完全二叉树中&#xff0c;除了最底…

完全二叉树的节点个数

给你一棵完全二叉树的根节点root&#xff0c;求出该树的节点个数。 完全二叉树的定义如下&#xff1a;在完全二叉树中&#xff0c;除了最底层节点可能没有填满之外&#xff0c;其余每层节点数都达到最大值&#xff0c;并且最下面一层的节点都集中在该层最左边的若干位置。若最底…

对二叉树、节点、度之间关系的思考(附图)

二叉树 节点 二叉树中每个元素都称为节点。 度 度的定义&#xff1a;节点所拥有的子树的数目称为该节点的度注意&#xff1a; 叶子节点的度为0 二叉树的度表示节点的子树或直接继承者的数目&#xff0c;二叉树的度是一个子树或单子树。2度是两个孩子&#xff0c;或者左和右…

【二叉树】二叉树中第二小的节点

0x00 题目 给定一个非空特殊的二叉树&#xff0c;每个节点都是 正数 并且每个节点的子节点数量只能为 2 或 0 如果一个节点有两个子节点的话 那么该节点的值等于两个子节点中 较小 的一个 更正式地说&#xff0c; root.val min(root.left.val, root.right.val) 总成立 给出…

求二叉树节点的路径

题目&#xff1a;求二叉树节点的路径 【问题描述】 建立一棵二叉树&#xff0c;编程实现求从根结点到给定结点之间的路径。 【基本要求】 建立一棵以二叉链表形式存储二叉树&#xff0c;以bt指向根结点&#xff0c;p指向任一给定的结点&#xff0c;编程实现“以字符形式输出…

二叉树(根节点到任意结点的路径)

假设二叉树采用二叉链表方式存储&#xff0c; root指向根结点&#xff0c;node 指向二叉树中的一个结点&#xff0c;编写函数 path&#xff0c;计算root到 node 之间的路径&#xff0c;&#xff08;该路径包括root结点和 node 结点&#xff09;。path 函数声明如下&#xff1a;…

计算机二叉树节点计算公式,二叉树节点数该怎么计算?有几种算法?

每一棵二叉树中都有左右两棵子树&#xff0c;子树中又有无数节点&#xff0c;那你们知道子树中的节点该怎么计算吗?快来跟小编了解一下吧。 二叉树算法概念 对于任何一棵二叉树来说&#xff0c;其叶子结点的数目为n0&#xff0c;且其度数为2的结点数n2&#xff0c;则n0n21. 证…

任意二叉树节点数、度数与叶子数的关系

二叉树的性质——节点数、度数、叶子节点数的关系 对于任意一棵二叉树&#xff0c;如果2度的节点数有n2个&#xff0c;则叶子数n0必定为n21(n0n21) (1) 我们假设有二叉树的枝有B个&#xff0c;如果从下往上思考&#xff0c;可以看做是每个节点都有一个枝与之对应&#xff0c…

二叉树的节点及树的创建

二叉树的基本概念 二叉树是每个节点最多有两个子树的树结构。通常子树被称作“左子树”&#xff08;left subtree&#xff09;和“右子树”&#xff08;right subtree&#xff09;。 二叉树的性质&#xff08;特性&#xff09; 性质1&#xff1a;在二叉树的第i层上至多有 2&am…

二叉树的节点个数以及高度详解(附图解)

二叉树的节点个数以及高度 文章目录 二叉树的节点个数以及高度前言NO.1 定义链式二叉树NO.2 创建二叉树一、二叉树节点个数1.代码展示2.递归图解 二、二叉树叶子节点个数1.代码展示2.递归图解 三、二叉树第k层节点个数1.代码展示2.递归图解 四、二叉树高度和深度1.代码展示2.递…

二叉树根节点到指定节点的路径

题目描述&#xff1a;给定一棵二叉树和二叉树中一个节点&#xff0c;输出根节点到指定节点间的路径。 10     / \     5 12     / \    4 7 指定节点7&#xff0c;那么输出路径应该是10-5-7。 分析与解法&#xff1a; 这个题目是在我做…

求二叉树根节点到指定节点的路径

算法 求二叉树根节点到指定节点的路径 author:Jingdai date:2020.11.05 题目描述 给你一个棵二叉树&#xff0c;再给你一个指定的节点&#xff0c;求根节点到指定节点的路径。 如图&#xff0c;比如让你求到 4 节点的路径&#xff0c;则应该返回的路径为 [0, 1, 4] 。 思路 …

二叉树节点和度的关系及特点

写在前边的话&#xff1a;你的支持是我写作的动力&#xff0c;有帮助到你的话麻烦点赞加收藏呦。感激不尽&#xff01;如有错误也请留言指正 目录 一、完全二叉树 节点总数的特点 二、二叉树 度的特点 1.n0与n2的关系 2.节点总数和度的关系 三、例题 例题一 例题二 例题三 一…

二叉树的节点

1、前序&#xff1a;根结点第一个访问&#xff0c;然后访问左、右孩子&#xff1b; 后序&#xff1a;根结点最后访问&#xff0c;开始先访问左、右孩子&#xff1b; 中序&#xff1a;根结点第二个访问&#xff0c;最先访问左孩子&#xff0c;最后访问右孩子 前序序列&#x…

求二叉树的节点个数

如果是空树&#xff0c;则结点个数为0&#xff0c;递归结束 否则结点个数为左子树的结点个数右子树的结点个数1 【算法描述】 int NodeCount(BiTree T) {if (T NULL)return 0; // 如果是空树&#xff0c;则结点个数为0&#xff0c;递归结束elsereturn NodeCount(T->lchild…

数据结构-第五章 二叉树

一、树 1.树的概念 树是一种非线性的数据结构&#xff0c;是由n个结点组成的一个集合。每一棵树都可以被分解为根节点和n棵子树构成(n>0) 根节点(Root)&#xff1a;没有父结点的结点称为根节点&#xff0c;如A 父结点&#xff1a;含有子结点的结点&#xff0c;如A是B的父…

零基础学二叉树

目录 二叉树的定义&#xff1a; 二叉树的应用&#xff1a; 认识二叉树&#xff1a; 二叉树的基本形式&#xff1a; 二叉树的节点&#xff1a; 二叉树的高度和深度&#xff1a; 二叉树的子树&#xff1a; 二叉树的度&#xff1a; 满二叉树&#xff1a; 完全二叉树&…