前言
有时候我们在本地调试前端页面的时候,需要通过 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 文件,显示的应该是百度的首页,就说明请求成功了。