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入门及如何反向代理解决生产环境跨域问题的更多相关文章

  1. Vue Nginx反向代理配置 解决生产环境跨域

    Vue本地代理举例: module.exports = { publicPath: './', devServer: { proxy: { '/api': { target: 'https://mov ...

  2. IIS反向代理解决Web前端跨域

    1.1 IIS7反向代理解决跨域问题IIS的版本必须是IIS7及其以上,否则没有反向代理功能:按照以下步骤来配置IIS,以实现反向代理: 1.2 配置步骤1. 下载安装ARR(Application ...

  3. nodejs 代理 解决开发环境跨域问题

    前后端分离项目中,会遇到跨域问题.解决方法无非就是jsonp cors等. 本次项目前端不搭node服务,线上用nginx搭站点,nginx转发ajax请求server. 本地开发环境的跨域问题用no ...

  4. 使用nginx反向代理处理前后端跨域访问

    本文主要解决:使用nginx反向代理处理前后端跨域访问的问题 1.何为跨域访问? 以下类型为跨域访问 1)不同域名间访问 www.zuiyoujie.com和www.baidu.com 2)同域名不同 ...

  5. Nginx入门简介和反向代理、负载均衡、动静分离理解

    场景 Nginx简介 Nginx ("engine x")是一个高性能的 HTTP 和反向代理服务器 特点是占有内存少,并发能力强,事实上 nginx 的并发能力确实在同类型的网页 ...

  6. 通过设置Ionic-Cli代理解决ionic serve跨域调试问题

    Ionic-Cli代理设置: 打开ionic.config.json文件,添加proxies代理配置字段: { "name": "ion", "app ...

  7. vue dev开发环境跨域和build生产环境跨域问题解决

    dev开发时解决请求跨域问题:config-index.js 配置代理dev: { env: require('./dev.env'), port: 8082, assetsSubDirectory: ...

  8. axiso 生产环境跨域配置(可用)

    1.npm install axios 后 在main.js中import import Axios from 'axios'Vue.prototype.$http = Axios 2.请求配置 th ...

  9. 利用nginx 反向代理解决跨域问题

    说到nginx,不得不说真的很强大,也带来很多便利用于解决一些头疼的难题. 一般来说可以用来做:静态页面的服务器.静态文件缓存服务器.网站反向代理.负载均衡服务器等等,而且实现这一切,基本只需要改改那 ...

随机推荐

  1. http之抽丝剥茧,深度剖析http的那些事儿

    最近,小编一心扎跟学技术,毫不顾及头发的掉落速度,都快成地中海了,不过也无大碍,谁让咱是一个爱钻技术的男人呢.最近两周老是看到http,那么这个http,有哪些猫腻呢,很多同学都有这种理解,就是对于h ...

  2. Android 圆形图片库 CircleImageView

    高仿微信朋友圈 10s 视频裁剪 引语 晚上好,我是猫咪,我的公众号「程序媛猫咪」会推荐 GitHub 上好玩的项目,挖掘开源的价值,欢迎关注我. <Android 图片裁剪库 uCrop> ...

  3. 使用VirtualBox+Vagrant快速搭建Linux虚拟机环境

    1. 软件准备 下载.安装Virtual Box https://www.virtualbox.org/wiki/Downloads 下载.安装Vagrant https://www.vagrantu ...

  4. 中阶 d06 http协议与servlet

    * 什么是协议 > 双方在交互.通讯的时候, 遵守的一种规范.规则. * http协议 > 针对网络上的客户端 与 服务器端在执行http请求的时候,遵守的一种规范. 其实就是规定了客户端 ...

  5. ThinkPHP5中raw的作用

    在tp5中,我们一般在模板中输出变量是这样的:{$test} 但是有时候在有些源码中我们可以看到这样的方式:{$test|raw} 这个时候如果你去找手册会发现,全文基本没有提到这个raw的作用. 那 ...

  6. 小猪佩奇C代码实现

    // ASCII Peppa Pig by Milo Yip #include <stdio.h> #include <math.h> #include <stdlib. ...

  7. linux 块设备简要介绍

    1. 块设备简单分类:SCSI块设备和LVM逻辑卷块设备: 2. 创建块设备需要两个linux内核函数:alloc_disk:add_disk; alloc_disk:用于分配一个gendisk结构体 ...

  8. CentOS Linux安装后扩充SWAP分区

    1. 首先先查看目前swap分区大小:     free -hm    total used free shared buffers cached    Mem: 11G 801M 10G 236K ...

  9. 计算机网络-CSMA/CD

    假定1km长的CSMA/CD网络的传输速率为1Gbit/s.设信号在网络上的传播速率为200000km/s,则能够使用此协议的最短帧长是? 答案:2×104bit/s 解析:C=2×105km/s,即 ...

  10. Centos7_Root密码重置

    原因: 最近出去见女朋友,竟然忘了Root用户的密码,此时考验linux基础扎不扎实的时候到了... 操作步骤: 解释补充: mount -o remountr,w / #修改根目录文件系统的权限,实 ...