前端nginx实现反向代理解决跨域问题

国服芜湖怪
1,481 阅读3分钟

前言

作为一名前（摸）端（鱼）工程师，你一定听过nginx的大名。在刚入行做项目时就听过什么“nginx”、什么“反向代理”之类，但那时候项目中已经有人配好了，所以一直没机会了解。这段时间要从0开始搭建一个项目故而了解一下。PS：网上有很多方法写的也很全，但是我在用的过程中会遇到不同的问题，因此记录下我的解决过程。

为什么会产生跨域

要使用nginx首先我们要理解nginx出现是为了解决什么问题。

源

源（origin）就是协议、域名和端口号。

同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。

跨域

跨域：受浏览器同源策略的影响，不是同源的脚本不能操作其他源下面的对象。想要操作另一个源下的对象是就需要跨域。

使用nginx可以将客户端和服务端映射到同一个源下，因此不会跨域的问题。

正文

1.利用express模拟后台接口

新建一个项目，目录结构如下

QQ截图20211111105714.png

利用npm下载express和cookie-parser

cnpm i express -S

app.js中代码

let express = require('express')
const cookieParser = require('cookie-parser')

let app = express();

let router = express.Router();
router.get('/ok', function(req, res) {
  res.json({
    code: 200,
    msg: 'isOk'
  })
})

router.get('/ok/son', function(req, res) {
  res.json({
    code: 200,
    msg: 'isokSon'
  })
})

app.use(router);
app.use(cookieParser)
//此时3000就是访问这个接口的接口号
app.listen(3000,function () {
  console.log('listen in 3000')
})

此时命令行输入node app.js启用

在浏览器中打开访问ok接口

QQ截图20211111110233.png 好的到这步咱们就已经完成了一个模拟的后台接口

2.前端页面

这一步可以利用http-server+jquery去实现，但是！！！这个http-server安装完成之后的命令总是提示我这不是一个命令，大无语了家人们。 这里还是记录一下 目录结构

QQ截图20211111111151.png

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="./jquery/jquery-3.5.1.js"></script>
<body>
  <button id="getOK">发送请求OK(客户端解决跨域问题)</button>
  <button id="getNO">发送请求NO(客户端解决跨域问题)</button>

  <script>
    $(document).ready(function() {
      $('#getOK').click(function() {
        $.ajax({
          url: 'http://localhost:3000/ok',
          success: function(res) {
            console.log('success', res)
          },
          error:function(err) {
            console.log('fail',err)
          }
        })
      })
    })
  </script>
</body>
</html>

全局安装http-server

npm i http-server -g

项目中用http-server 或 hs启动

QQ截图20211111113338.png

我丢...网上找了很多方法还是不行。还是在vue项目中写了

启动一个vue项目，端口为8081

QQ截图20211111115103.png

用axios发送一个请求

export const getOK = get('http://localhost:3000/ok');

QQ截图20211111115737.png

可以看到直接报错了，因为他们不是同源的。这时要用到nginx了。

nginx的准备工作

nginx的下载地址

nginx.org/en/download… 可以下稳定版本的

解压缩之后点exe文件，打开命令行窗口cd到nginx安装目录

nginx -v

出现版本号表示安装成功

QQ截图20211111135333.png

配置nginxconfig

想要nginx自定义我们的域名和端口号要去nginx.config去修改代码 这里修改http对象下的server对象

QQ截图20211111140121.png

nginx.config代码

    server {
        listen       3003;   //自定义端口号，前端和后端都将被转发到这个端口下
        server_name  localhost;   //nginx将转发到此域名下

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            
             proxy_pass http://localhost:8081;   //   /表示精确匹配路径为/的url，真实访问为http://localhost:8081
        }
        location /ok {
             proxy_pass http://localhost:3000;  //匹配到ok后面的url真实实际访问http://localhost:3000
             add_header  Access-Control-Allow-Origin *;   //这个不加还是会报错，好多教程都没加这句
        }

这时访问的后端地址就变化为http://localhost:3003了， 去axios修改

export const getOK = get('http://localhost:3003/ok');

此时命令行启动nginx并更新，每次修改config文件需要

nginx -s reload

才会生效

QQ截图20211111141253.png

再访问接口可以看到有数据了

QQ截图20211111141315.png

avatar
文章
阅读
粉丝