文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Nginx配置反向代理解决跨域问题

2023-09-06 21:54

关注

第一步:下载Nginx

一、下载

官网下载地址:http://nginx.org/en/download.html
我下载的版本:http://nginx.org/download/nginx-1.15.2.zip
(我也是参考网上的步骤,所以下载的不是最新版)

二、解压

将文件解压到本地地址(地址尽量不要出现中文)
在这里插入图片描述

三、启动

使用cmd进入nginx.exe所在文件夹下,并执行start nginx
(如果开启了window防火墙,点击允许访问)
在这里插入图片描述

四、测试

启动成功后,浏览器访问 localhost,即可看到Nginx 欢迎页
在这里插入图片描述
如果启动启动失败,可能是IIS占用了80端口,先往后看。

第二步:了解配置文件

一、nginx配置文件介绍

nginx配置文件:/nginx-1.15.2/conf/nginx.conf

配置文件组成

此处我只是简单说一下配置文件的组成,方便后文知道在哪里修改内容,具体知识点可自行去查相关资料

二、修改配置文件

通过编译软件或直接txt方式打开配置文件
(此处我是通过vscode打开的文件)
在这里插入图片描述
前文中启动失败的,找到http块下的server块,修改其中的端口号(比如改成8000),保存后重新启动nginx,然后再打开浏览器(localhost:8000)看看是否能访问到Nginx 欢迎页
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

反向代理

代理前

<template>  <div>    <el-input v-model="user.name" placeholder="请输入用户名">el-input>    <el-input v-model="user.password" placeholder="请输入密码">el-input>    <el-button @click="add">添加el-button>    <el-button @click="all">获取el-button>  div>template><script>export default {  data () {    return {      user: {        name: '',        password: ''      }    };  },  methods: {    add() {      this.axios.post('http://localhost:9090/api/insert', this.user).then(res => {        this.$message("添加成功")      }).catch(err => {        this.$message("添加失败:" + err)      })    },    all() {      this.axios.get('http://localhost:9090/api/all').then(res => {        console.log(res);      }).catch(err => {        console.log(err);      })    }  }}script>

在这里插入图片描述

配置代理

在配置文件的http块下的server块中,删除/注释掉 location / 下的内容,配置成项目运行的地址,再添加 location /api 配置
此时的配置内容意思为,将http://127.0.0.1:8080和http://127.0.0.1:9090都代理到localhost:8000地址下,这样就不会有跨域的问题了
在这里插入图片描述

代理后

保存配置文件后,启动(start nginx)/重启(nginx -s reload )nginx

<template>  <div>    <el-input v-model="user.name" placeholder="请输入用户名">el-input>    <el-input v-model="user.password" placeholder="请输入密码">el-input>    <el-button @click="add">添加el-button>    <el-button @click="all">获取el-button>  div>template><script>export default {  data () {    return {      user: {        name: '',        password: ''      }    };  },  methods: {    add() {      this.axios.post('http://localhost:8000/api/insert', this.user).then(res => {         this.$message("添加成功")      }).catch(err => {        this.$message("添加失败:" + err)      })    },    all() {      this.axios.get('http://localhost:8000/api/all').then(res => {        console.log(res);      }).catch(err => {        console.log(err);      })    }  }}script>

在这里插入图片描述
在这里插入图片描述
可以看到,此时的项目和数据都被代理到8000端口下了,点击“获取”按钮,就可以成功获取数据了
在这里插入图片描述

补充知识点

Nginx常用命令说明

命令说明
start nginx启动Nginx
nginx -s stop停用Nginx
nginx -s quit优雅的停用Nginx(处理完正在进行中请求后停用)
nginx -s reload重新加载配置,并优雅的重启进程

来源地址:https://blog.csdn.net/weixin_52580677/article/details/126741801

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-服务器
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯