前端经常遇到跨域的问题,有时候调用其他平台的API接口又无法修改请求头设置,这时候我们可以自己搭建一个nginx服务器进行跨域获取数据以此来解决问题。
一、设置网卡启动
1.检测网卡是否开启
因为需要连网安装nginx,所以我们需要先确保网卡是否打卡,yum
命令是否可以正常使用。
yum install wget
在后面我们会使用到 wget
这个插件,所以在测试网络这里将插件安装好,如果网卡能使用则开始显示下载进度;如果不能使用则会出现以下提示
出现这个提示的原因是因为CentOS7安装完成后默认网卡是关闭的,这个时候我们就需要手动修改文件开启
2.开启网卡
确保自己使用的是root账号,若不是,请自行更换。
1.)进入/etc/sysconfig/network-scripts 目录。即输入命令 cd /etc/sysconfig/network-scripts
,使用命令 ls -a
可以查看该目录下的所有文件
2.)修改ifcfg-ens33的网卡配置文件。输入命令 vi ifcfg-ens33
进入vi编辑器,按下 i
或者 insert
键进入编辑模式,将 ONBOOT"
的值修改为 yes
,之后按esc退出编辑模式,输入 :wq
保存退出
3.)修改完成后需要重启系统或者重启网卡才能生效,输入命令 reboot
或 service network restart
重启,重启完成后再使用 yum
命令安装 wget
二、安装环境
因为nginx是使用C++语言编写的,所以需要安装c++依赖才能正常使用
1.gcc安装
安装 nginx 需要先将官网下载的源码进行编译,编译依赖 gcc 环境,如果没有 gcc 环境,则需要安装:
yum install gcc-c++
安装后续会出现 [y/n/d]
的选项,一直选择输入 y
回车安装。
2. PCRE pcre-devel 安装
PCRE(Perl Compatible Regular Expressions)
是一个Perl库,包括 perl 兼容的正则表达式库。nginx 的 http 模块使用 pcre 来解析正则表达式,所以需要在 linux 上安装 pcre 库,pcre-devel 是使用 pcre 开发的一个二次开发库。nginx也需要此库。命令:
yum install -y pcre pcre-devel
3. zlib 安装
zlib
库提供了很多种压缩和解压缩的方式, nginx 使用 zlib 对 http 包的内容进行 gzip ,所以需要在 Centos 上安装 zlib 库。
yum install -y zlib zlib-devel
4. OpenSSL 安装
OpenSSL
是一个强大的安全套接字层密码库,囊括主要的密码算法、常用的密钥和证书封装管理功能及 SSL 协议,并提供丰富的应用程序供测试或其它目的使用。
nginx 不仅支持 http 协议,还支持 https(即在ssl协议上传输http),所以需要在 Centos 安装 OpenSSL 库。
yum install -y openssl openssl-devel
三、Nginx安装
- 到 nginx官网 查看最新版本的安装包,这里选择的是最新稳定版1.16.0
- 使用
wget
命令下载
wget https://nginx.org/download/nginx-1.16.0.tar.gz
- 下载完成后使用解压并进入到文件夹内
tar xvf nginx-1.16.0.tar.gz
cd nginx-1.16.0
- 进入文件后开始配置(prefix后的路径是nginx的安装目录,后面的安装目录指的就是这个目录)
因为反向代理中可能会使用到https
协议,所以在配置中添加了ssl模块
./configure --prefix=/usr/local/nginx --with-http_ssl_module
- 编译安装
make
make install
至此,nginx已经安装完毕了
四、开启nginx
使用 whereis nginx
命令查看安装路径
进入到安装路径的 sbin
文件下
cd /usr/local/nginx/sbin
进入到目录下后使用 ./nginx
启动,使用浏览器访问,出现下面界面则配置成功
关闭防火墙
如果不能访问,使用 ./nginx -t
命令查看配置是否成功
如图则表示配置成功,此时我们关闭防火墙便能访问
在CentOS7中关闭防火墙使用以下命令,
#临时关闭
systemctl stop firewalld
#禁止开机启动
systemctl disable firewalld
五、配置反向代理
进入到nginx安装目录,使用 ls-a
命令我们可以看到又一个 conf
文件,进入文件,同样使用 ls-a
命令可以看到有一个 nginx.conf
文件,
使用 vi 命令将
server
对象中的location修改成内容如下:
location / {
proxy_pass https://h5.ele.me; #需要反向代理服务器的地址
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' *;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' *;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}
#root html;
#index index.html index.htm;
}