nginx反向代理到目标服务器，解决跨域问题

日常工作中我们本地开发过程中经常碰到跨域问题，例如：

这个时候我们又不想去麻烦服务端让他们给我们配一个本地域名。那怎么办呢？我们本着求人不如求己的方法理论，直接打开了我们的nginx配置文件： nginx -t上面会显示配置文件所在地址

然后打开配置文件,进行简单的一小段配置，这段代码的作用就是当你访问test.abc.com 的时候，实际上访问的是test.abc.com:8080 也就是你本地启动的服务器（webpack 、vite、selvte等等）

js 复制代码

 server {
        listen       80;
        server_name  test.abc.com;
        location / {
            proxy_pass http://test.abc.com:8080;
        }
        error_page  404              /404.html;
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

但是碰到一些接口访问http的时候直接重定向到https，这个时候我们可以本地启动一个https的服务，例如test.abc.com ,因为接口和域名都是https，同源协议中的协议就可以解决了，下面是https的nginx配置

ini 复制代码

```js
 server {
    listen 443 ssl;
    server_name test.abc.com;

    ssl_certificate ./employer.58.com.crt;
    ssl_certificate_key ./employer.58.com.key;

    # 可选：强制HTTPS访问
    # 如果你希望所有的HTTP请求都被重定向到HTTPS，可以添加如下设置
    # 如果不需要，可以注释掉或者删除这部分设置
    # return 301 https://$server_name$request_uri;

    location / {
        proxy_pass https://test.abc.com:8080;
        # 下方直接copy 不需要更改
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}
```

以上代码只有这两句代码需要稍微处理下

ssl_certificate ./test.abc.com.crt;

ssl_certificate_key ./test.abc.com.key;

配置的主要是证书的位置，因为我是在nginx配置文件目录里面生成的证书，所以直接用了相对路径引入的，大家可修改为自己证书的位置，名称也可以修改。生成证书的命令

js 复制代码

openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout test.abc.com.key -out test.abc.com.crt

问题可以随便写

以上就是nginx做方向代理的解决方案，当然如果单纯的想本地启动一个https的服务，下面是一个webpack-dev-server的配置案例，不借助nginx

js 复制代码

 devServer: {
        // 配置代理
        proxy: {},
        // 设置端口号
        port: 8080,
        // 设置 host
        host: 'test.abc.com',
        // 是否自动打开浏览器
        open: false,
        https: {
            key: fs.readFileSync('/opt/homebrew/etc/nginx/key.pem'),
            cert: fs.readFileSync('/opt/homebrew/etc/nginx/cert.pem'),
            passphrase: '', // 替换为你的证书密码,无密码的可以忽略
        },
    },

还是只有两处需要修改

/opt/homebrew/etc/nginx/key.pem

/opt/homebrew/etc/nginx/cert.pem

密钥生成命令

js 复制代码

openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365