nginx反向代理跨域配置

nginx反向代理跨域配置

从开始学习编程，到实际工作之后，发现很多公司似乎都在用Nginx来做服务器的反向代理，nginx不仅能够解决跨域问题，还有负载均衡的效果，我的上一家公司也是用的nginx，后来从后端转到全栈之后，我便开始接触nginx，下面是具体配置，记录在此，以防忘记。

前言

nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，并在一个BSD-like 协议下发行。由俄罗斯的程序设计师Igor Sysoev所开发，供俄国大型的入口网站及搜索引擎Rambler（俄文：Рамблер）使用。其特点是占有内存少，并发能力强，事实上nginx的并发能力确实在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝。

在做WEB个人项目的时候，有的人喜欢写Jsp，CS等，便于快捷开发，但是后期不便于维护，并且jsp，cs等编写的ide代码提示友好度差，因此前后端分离是大势所趋。但是随之而来的就是跨域问题。

  比如说下图，我们在一个html文件中这样发送异步请求，浏览器会报“Access-Control-Allow-Origin' header is present on the requested resource”这个错误,意思是存在跨域请求，当一个地址请求另一个与自己地址不同端口不同的地址的时候，会出现跨域，因为他会检查请求头是否匹配。

   

解决办法:1.修改HTML头文件，改成可以跨域访问（不推荐）

                 2.用nginx来对地址进行反向代理，以下面为例

nginx 配置

1.去官网下载nginx，是个压缩包，解压出来，和Tomcat一样的用法。

2.解压后有个conf的文件夹，修改里面的nginx.conf这个文件

3.先说跨域配置

在上面的图中我们可以看到 listen 为nginx监听的端口，server_name 为本的的ip，当然如果有其他的地址的话也可以设置，比如“”baidu.com”，location / 下面有root为前端资源文件，index 指的是起始页，这里的root建议放在根目录，因为有可能会错，在这里又有个 location /mp 这个流程我下一章会详细讲解每一个的意思，以及匹配规则，在这里我配置了一个/mp来作为我API的代理. rewite 后面是请求地址正则匹配规则，以^开头，$结束，/$1 代表是(.*)中的内容，proxy_pass 是我的目标地址。

4.修改HTML中的请求路径，运用代理,如下图是修改后的

这里我请求的“

/mp/Expense/UserController/login.do

地址经过nginx代理之后就是这个地址

http://localhost:8080/Expense/UserController/login.do

这样就可以跨域访问了，实现了前后端分离。

5.nginx启动的时候有几个快捷命令需要提一下，如果电脑是win10系统，建议用cmd进去，不然会有错误。

进入到解压的文件夹，start nginx就启动了nginx，记住每一次修改了conf就要reload一下

start nginx 启动nginx

nginx -s stop 退出

nginx -s quit 有程序的退出

nginx -s reload 重启

windows下修改了nginx的配置建议每次看下进程是否杀死了，还有浏览器清下缓存，避免修改配置文件无效.

以上就是nginx解决跨域问题，在之后的一篇文章中我会详细介绍在高并发的情况下，nginx如何配置来实现负载均衡，以及 location的匹配规则以及企业常用的配置技巧。