Nginx跨域配置详解

一、概念

Ningx,是轻量级、开源的web服务器，具有高性能的HTTP和反向代理服务器，同时也是一个IMAP/POP3/SMTP代理服务器。
优势：

以事件驱动的方式编写，使其具有高并发高性能
可扩展性好
热部署

应用场景

静态资源服务，通过本地文件系统提供服务
反向代理服务、负载均衡
API服务、权限控制，减少应用服务器压力

二、正向代理和反向代理

两种代理做的事情都是代为收发请求和相应

正向代理: 代理客户端

正向代理代理的是客户端，服务器不知道实际发起请求的客户端
**反向代理:**代理服务端

反向代理的是服务器，客户端不知道实际提供服务的服务端

三、安装Nginx

官网下载，到此目录下，start ningx 就可以启动了

启动后如下：

conf都是配置的，点进去有一个nginx.conf就可以配置相关内容了

四、跨域配置

前端代码，访问的时候要用服务器的地址，我这里用的是http-server

<button id="getOK">发送请求OK(客户端解决跨域问题)</button><script>$(document).ready(function () {$('#getOK').click(function () {$.ajax({url:'http://localhost:3003/ok',success:function(res) {console.log("success",res)},error:function(err) {console.log('fail',err)}})})}) </script>

后端代码

const express = require('express')
const cookieParser = require('cookie-parser')var app = express()var router = express.Router()
router.get('/ok',function (req,res) {res.json({code:200,msg:"isOK"})
})app.use(router)
app.use(cookieParser)
app.listen(3000,function () {console.log('listen in 3000')
})

nginx配置

server {listen 3003;server_name localhost;## 前端地址location = / {proxy_pass  http://127.0.0.1:8080;}## /no 表示以/no开头的url## 后端地址location /no {proxy_pass http://localhost:3000; }

这样他们就在同一个域下了，访问如下

五、nginx配置gzip压缩

server {# 开启gzip 压缩gzip on;# 设置gzip所需的http协议最低版本 （HTTP/1.1, HTTP/1.0）gzip_http_version 1.1;# 设置压缩级别，压缩级别越高压缩时间越长  （1-9）gzip_comp_level 4;# 设置压缩的最小字节数， 页面Content-Length获取gzip_min_length 1000;# 设置压缩文件的类型  （text/html)gzip_types text/plain application/javascript text/css;#on的话会在Header里增加"Vary: Accept-Encoding"，给代理服务器用的，有的浏览器支持压缩，有的不支持，所以避免浪费不支持的也压缩，所以根据客户端的HTTP头来判断，是否需要压缩#我这里的浏览器肯定支持gzip压缩，所以就不开启此功能了gzip_vary off;#IE6对Gzip不怎么友好，不给它Gzip压缩了gzip_disable "MSIE [1-6]\.";}

六、nginx常用的指令

start nginx           启动nginx
nginx -s stop        快速关闭nginx
nginx -s reload     改变了Nginx相关配置，需要重新加载配置而重载。

七、nginx里的正则

~：    区分大小写
~*：   不区分大小写
^~:     非精确匹配
=:       精确匹配

个人笔记，大概了解这么多，没有深入学习，以后再补充，如果有什么问题，还请多指教

Nginx跨域配置详解相关推荐

vue如何配置服务器端跨域_客户端（vue框架）与服务器（koa框架）通信及服务器跨域配置详解...
本篇博客主要说明: 前后端框架(本例中是vue和koa)如何发送请求?获取响应? 以及跨域问题如何解决? vue部分: import App from './App.vue' import Axios ...
proxytable代理不生效_proxyTable代理跨域使用详解
这次给大家带来proxyTable代理跨域使用详解,proxyTable代理跨域使用的注意事项有哪些,下面就是实战案例,一起来看一下. 什么是代理跨域浏览器之间有同源策略,出于安全考虑不同域之间不允 ...
jQuery中getJSON跨域原理详解
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp28 jQuery中getJSON跨域原理详解前几天我再开发一个叫河蟹工 ...
Nginx的location配置详解
Nginx的location配置详解匹配顺序 location 的匹配顺序其实是先匹配普通,再匹配正则正则匹配会覆盖普通匹配(实际的规则,比这复杂) 执行顺序普通 location的匹配规则是& ...
Nginx SSI指令配置详解
这篇文章主要介绍了Nginx SSI指令配置详解,本文讲解了什么是SSI.为什么要用SSI.nginx配置SSI.页面上配置.配置示例等内容,需要的朋友可以参考下什么是SSI Server Side ...
Nginx跨域配置、限制连接、限制下载速度
目录一.Nginx跨域配置二.Nginx限制连接配置三.Nginx限制下载速度配置一.Nginx跨域配置 #允许跨域请求的域,* 代表所有 add_header 'Access-Control ...
Nginx反向代理配置详解
Nginx反向代理配置详解 Nginx简单的反向代理配置,包括配置文件中各项参数的的注释,好了,开始! 开始首先安装Nginx 一.建立用户和用户组 1 2 ./usr/sbin/groupadd w ...
vue-admin-template解决跨域问题详解
vue-admin-template入门详解(后端springboot+sprngsecurity+jwt+redis) 自&如 2020-05-10 23:25:09 1232 收藏 10 ...
Nginx指南和配置详解
Nginx指南 Nginx ("engine x") 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器. Nginx 因它的稳定性 ...
Nginx跨域配置、防盗链配置
跨域配置当出现403跨域错误的时候No 'Access-Control-Allow-Origin' header is present on the requested resource,需要给Ng ...