使用Nginx解决跨域问题

** 前言：**

    项目是公司的老项目，只有部署在服务器上的时候，项目才可以正常运行（接口是通的）；现在需求：在现有的项目代码上进行修改，请求接口是第三方给的。接口是正常的，通过Ajax进项请求，存在跨域问题。然后就进行了Nginx反向代理的摸索操作，，，

原理：

Nginx是一个高性能的开源Web服务器和反向代理服务器。它的代理功能是通过反向代理实现的。

Nginx的代理原理是将客户端请求转发给后端服务器，并将后端服务器的响应返回给客户端。它作为中间层存在，接收客户端的请求，并根据配置规则将请求转发给后端服务器。

具体的代理过程如下：

1. 客户端发送请求到Nginx服务器。
2. Nginx根据配置规则，确定请求需要被代理到哪个后端服务器。
3. Nginx将请求转发给后端服务器。
4. 后端服务器处理请求，并生成响应。
5. 后端服务器将响应返回给Nginx。
6. Nginx将后端服务器的响应返回给客户端。

通过这种方式，Nginx实现了反向代理功能。它可以隐藏后端服务器的真实IP地址和其他信息，起到负载均衡、缓存加速、安全过滤等作用。同时，Nginx的高性能和高并发能力也使得它成为一个常用的代理服务器解决方案。

** 步骤：**

一、配置环境

** **1、下载安装Nginx nginx: download

2、查看是否安装成功

• 找到nginx的安装目录

** 二、使用vscode随机启动一个vue项目 （npm run serve），**

项目启动成功后，然后把h5项目放入所启动vue项目的public目录下，通过Network地址（本人项目启动后的Network地址是http://192.168.1.149:8080）拼接上h5项目的项目名和index.html进行**访问**；即 http://192.168.1.149:8080/znwd/index.html ；可以访问到项目页面，查看网络，可以看到接口存在跨域。

三、修改配置文件

找到nginx.conf配置文件（路径：nginx-1.24.0 ==> conf ==>nginx.conf），进行文件修改

配置代码如下：

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
            proxy_pass http://192.168.1.149:8080/;
            proxy_set_header Host $http_host;
        }
        location  /apis {
            proxy_pass http://14.18.99.55:8846/core/v3;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #

**四、重启nginx **

修改完配置文件需重启nginx

nginx.exe -s reload

**五、访问项目 **

没有配置Nginx之前，访问项目地址是 http://192.168.1.149:8080/znwd/index.html

配置完Nginx后，访问项目地址变成 http://localhost/znwd/index.html

Ajax请求：

** 六、遇到问题**

1. 重启Nginx时报错 nginx: [error] CreateFile() "D:\nginx-1.24.0\nginx-1.24.0/logs/nginx.pid" failed 解决方式：执行nginx -c conf/nginx.conf命令创建logs/nginx.pid文件，然后关闭命令指向窗口，在nginx目录下重新cmd打开命令执行窗口，输入nginx.exe -s reload 命令，不再报错。
2. 重启项目后，接口报404错误（百度结果是：查看80端口是否被占用，如果被占用，杀死占用80端口的进程）；根据搜索结果进行操作，80端口没有被占用，报错原因是修改文件时，本地项目地址proxy_pass http://192.168.1.149:8080;忘记了在8080后添加'/'

** 七、补充**

Nginx常用命令：

nginx -v : 查看版本号

nginx -t:验证配置是否正确

start -s stop:快速停止或关闭Nginx

nginx -s reload:配置文件修改后重装载命令