Nginx入门及如何反向代理解决生产环境跨域问题
1.Nginx入门与基本操作篇
注:由于服务器是windows系统,所以本文主要讲解Nginx在windows下的操作。
- 首先下载Nginx
- 解压缩,我们所有的配置基本都在万能的 nginx/conf/nginx.conf 中完成,其它文件可以不用理
- 关于nginx.conf
...
#需要我们按需要修改的一般只有中间server里的代码
server {
# 设置监听端口
listen 9000;
server_name localhost;
# 设置静态资源路径,如下设置打输入地址时会打开H盘app/dist下的index页面
location / {
root H:/app/dist;
index index.html;
}
# 报错页面,同上根据需要设置,也可不理
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
...
复制代码
- 这样一个简单服务的配置就完成了,启动服务访问 http://localhost:9000 即可打开对应网页,如果需要启动多个服务,只需多添加server配置后重启即可。
- 几个常用的操作指令(以下指令请在nginx文件目录下使用)
# 启动nginx(我的情况是运行起来后cmd就输入不了其它指令了,需要在打开一个cmd来操作)
nginx.exe
# 修改nginx.conf文件后重启nginx
nginx.exe -s reload
# 暂停nginx服务
nginx.exe -s stop
# 有时暂停服务失效,需要强制终止nginx进程 注:/f 强制执行
taskkill /im nginx.exe /f
复制代码
2.反向代理解决跨域问题
通常开发环境可以通过设置proxy解决跨域问题,而生产环境下要么把前端项目放在后端项目里,要么设置cor解决跨域问题,前者不利于前后端分离,后者需要后端配置,而现在使用nginx做启动服务设置反向代理可以很好解决跨域问题。
- 还是回到万能的nginx.conf文件,添加location匹配规则实现代理转发
server {
listen 9000;
server_name localhost;
location / {
root H:/app/dist;
index index.html;
}
#设置代理转发
location /api/ {
proxy_pass http://localhost:9600/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
复制代码
- 通过上面的设置,在重启服务,可以让页面中所有包含 /api/ 字段的请求都转为由服务器去向http://localhost:9600/地址发送请求,从而巧妙的解决了浏览器的跨域问题。
- 怎么样,是不是很简单,快动手配置是试试吧(^_^)~
转载于:https://juejin.im/post/5b014d5bf265da0b9e655631
Nginx入门及如何反向代理解决生产环境跨域问题的更多相关文章
- Vue Nginx反向代理配置 解决生产环境跨域
Vue本地代理举例: module.exports = { publicPath: './', devServer: { proxy: { '/api': { target: 'https://mov ...
- IIS反向代理解决Web前端跨域
1.1 IIS7反向代理解决跨域问题IIS的版本必须是IIS7及其以上,否则没有反向代理功能:按照以下步骤来配置IIS,以实现反向代理: 1.2 配置步骤1. 下载安装ARR(Application ...
- nodejs 代理 解决开发环境跨域问题
前后端分离项目中,会遇到跨域问题.解决方法无非就是jsonp cors等. 本次项目前端不搭node服务,线上用nginx搭站点,nginx转发ajax请求server. 本地开发环境的跨域问题用no ...
- 使用nginx反向代理处理前后端跨域访问
本文主要解决:使用nginx反向代理处理前后端跨域访问的问题 1.何为跨域访问? 以下类型为跨域访问 1)不同域名间访问 www.zuiyoujie.com和www.baidu.com 2)同域名不同 ...
- Nginx入门简介和反向代理、负载均衡、动静分离理解
场景 Nginx简介 Nginx ("engine x")是一个高性能的 HTTP 和反向代理服务器 特点是占有内存少,并发能力强,事实上 nginx 的并发能力确实在同类型的网页 ...
- 通过设置Ionic-Cli代理解决ionic serve跨域调试问题
Ionic-Cli代理设置: 打开ionic.config.json文件,添加proxies代理配置字段: { "name": "ion", "app ...
- vue dev开发环境跨域和build生产环境跨域问题解决
dev开发时解决请求跨域问题:config-index.js 配置代理dev: { env: require('./dev.env'), port: 8082, assetsSubDirectory: ...
- axiso 生产环境跨域配置(可用)
1.npm install axios 后 在main.js中import import Axios from 'axios'Vue.prototype.$http = Axios 2.请求配置 th ...
- 利用nginx 反向代理解决跨域问题
说到nginx,不得不说真的很强大,也带来很多便利用于解决一些头疼的难题. 一般来说可以用来做:静态页面的服务器.静态文件缓存服务器.网站反向代理.负载均衡服务器等等,而且实现这一切,基本只需要改改那 ...
随机推荐
- http之抽丝剥茧,深度剖析http的那些事儿
最近,小编一心扎跟学技术,毫不顾及头发的掉落速度,都快成地中海了,不过也无大碍,谁让咱是一个爱钻技术的男人呢.最近两周老是看到http,那么这个http,有哪些猫腻呢,很多同学都有这种理解,就是对于h ...
- Android 圆形图片库 CircleImageView
高仿微信朋友圈 10s 视频裁剪 引语 晚上好,我是猫咪,我的公众号「程序媛猫咪」会推荐 GitHub 上好玩的项目,挖掘开源的价值,欢迎关注我. <Android 图片裁剪库 uCrop> ...
- 使用VirtualBox+Vagrant快速搭建Linux虚拟机环境
1. 软件准备 下载.安装Virtual Box https://www.virtualbox.org/wiki/Downloads 下载.安装Vagrant https://www.vagrantu ...
- 中阶 d06 http协议与servlet
* 什么是协议 > 双方在交互.通讯的时候, 遵守的一种规范.规则. * http协议 > 针对网络上的客户端 与 服务器端在执行http请求的时候,遵守的一种规范. 其实就是规定了客户端 ...
- ThinkPHP5中raw的作用
在tp5中,我们一般在模板中输出变量是这样的:{$test} 但是有时候在有些源码中我们可以看到这样的方式:{$test|raw} 这个时候如果你去找手册会发现,全文基本没有提到这个raw的作用. 那 ...
- 小猪佩奇C代码实现
// ASCII Peppa Pig by Milo Yip #include <stdio.h> #include <math.h> #include <stdlib. ...
- linux 块设备简要介绍
1. 块设备简单分类:SCSI块设备和LVM逻辑卷块设备: 2. 创建块设备需要两个linux内核函数:alloc_disk:add_disk; alloc_disk:用于分配一个gendisk结构体 ...
- CentOS Linux安装后扩充SWAP分区
1. 首先先查看目前swap分区大小: free -hm total used free shared buffers cached Mem: 11G 801M 10G 236K ...
- 计算机网络-CSMA/CD
假定1km长的CSMA/CD网络的传输速率为1Gbit/s.设信号在网络上的传播速率为200000km/s,则能够使用此协议的最短帧长是? 答案:2×104bit/s 解析:C=2×105km/s,即 ...
- Centos7_Root密码重置
原因: 最近出去见女朋友,竟然忘了Root用户的密码,此时考验linux基础扎不扎实的时候到了... 操作步骤: 解释补充: mount -o remountr,w / #修改根目录文件系统的权限,实 ...