使用 Nginx 反向代理解决前端跨域调试问题

最新推荐文章于 2024-04-30 22:20:51 发布

epoll_wait()

最新推荐文章于 2024-04-30 22:20:51 发布

阅读量4.3k

点赞数

分类专栏： nginx 文章标签： nginx 反向代理跨域

本文链接：https://blog.csdn.net/qq_42451060/article/details/85958130

版权

nginx 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

有时候我们在本地调试前端页面的时候，需要通过 ajax 请求后端接口，而有时候后端接口是没有做跨域处理的，所以导致无法在本地请求接口。今天介绍的用 Nginx 反向代理是一种不用修改后端代码来处理跨域请求的方法，用于本地调试的情况。

举个栗子，我们在前端页面直接请求 www.baidu.com。
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    $.get('https://www.baidu.com', {}, function (res) {
        console.log(res);
    });
</script>
</head>
<body>
</body>
</html>

出现跨域问题。
在这里插入图片描述

关于 Nginx

Nginx (engine x) 是一个高性能的HTTP和反向代理服务，也是一个IMAP/POP3/SMTP服务。我们在本地运行 Nginx，然后把前端请求的域名改为 Nginx 绑定的域名，在 Ngixn 配置中将请求转发到原来请求的服务器上，用到了 Nginx 的反向代理服务。

下载 Nginx

首先去官网（http://nginx.org/en/download.html）下载 Nginx，选择稳定版即可。
在这里插入图片描述

配置 Nginx

解压到任意目录后，打开 Nginx所在目录/conf/nginx.conf，将转发请求的配置粘贴到 http { ... } 中。

http {

    ...

    server {
        # 监听本地端口 80
        listen 80;
        # 本地域名
        server_name proxy-www.baidu.com;
        
        location / {
            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain; charset=utf-8';
                add_header 'Content-Length' 0;
                return 204;
            }
            if ($request_method = 'POST') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
                add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
              }
            if ($request_method = 'GET') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
                add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
            }
            # 将请求转发到指定的域名
            proxy_pass https://www.baidu.com/;
            proxy_redirect off;
         }
    }
    
    ...

}

proxy-www.baidu.com 是本地劫持的域名，www.baidu.com 是目标域名，我们请求 proxy-www.baidu.com 的时候，Nginx 就会将请求转发到 www.baidu.com 上。

配置 host

接下来需要在本地 host 文件中配置 proxy-www.baidu.com，打开 C:/Windows/System32/drivers/etc/hosts 文件，在文件末添加一行。

127.0.0.1 proxy-www.baidu.com

然后将上面 html 中的请求地址改为 proxy-www.baidu.com

运行 Nginx

打开 Nginx 所在目录，选中 nginx.exe 文件，右键以管理员身份运行。

现在访问 html 文件，显示的应该是百度的首页，就说明请求成功了。
在这里插入图片描述

epoll_wait()

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
使用 Nginx 反向代理解决前端跨域调试问题

Nginx (engine x) 是一个高性能的HTTP和反向代理服务，也是一个IMAP/POP3/SMTP服务。我们在本地运行 Nginx，然后把前端请求的域名改为 Nginx 绑定的域名，在 Ngixn 配置中将请求转发到原来请求的服务器上，用到了 Nginx 的反向代理服务。
复制链接

扫一扫