使用nginx反向代理解决前端跨域问题
1.
首先去Nginx官网下载一个最新版本的Nginx,下载地址:http://nginx.org/en/download.html。我这里下载的版本是:nginx/Windows-1.12.0。下载完成之后,得到一个.zip的压缩包,把压缩包解压到E盘根目录。如图1-1
2.
打开目录 E:\nginx\conf ,编辑nginx.conf文件,修改成如下:
#user nobody;
worker_processes 1; #error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info; #pid logs/nginx.pid; events {
worker_connections 1024;
} http {
client_max_body_size 100M;
include mime.types;
default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.log main; sendfile on;
#tcp_nopush on; #keepalive_timeout 0;
keepalive_timeout 65; #gzip on; server {
listen 80; # nginx访问端口
server_name localhost; # nginx访问域名 location / {
proxy_pass http://127.0.0.1:8020; # 前端静态页面地址
proxy_redirect default;
#设置主机头和客户端真实地址,以便服务器获取客户端真实IP
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
} location /apis { # 自定义nginx接口前缀
rewrite ^/apis/(.*)$ /$1 break; # 监听所有/apis前缀,是则转发后台api接口地址
include uwsgi_params;
proxy_pass http://127.0.0.1:8080; # 后台api接口地址
#设置主机头和客户端真实地址,以便服务器获取客户端真实IP
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
} error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
} }
注: 如果项目接口路径后面带前缀的,需要如下设置:
location /apis/ { # 自定义nginx接口前缀
rewrite ^/apis\//(.*)$ /$1 break; # 监听所有/apis前缀,是则转发后台api接口地址
include uwsgi_params;
proxy_pass http://127.0.0.1:8080/ser/; # 后台api接口地址
#设置主机头和客户端真实地址,以便服务器获取客户端真实IP
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
http://chenwenming.blog.51cto.com/327092/1203537
在nginx中配置proxy_pass时,当在后面的url加上了/,相当于是绝对根路径,则nginx不会把location中匹配的路径部分代理走;如果没有/,则会把匹配的路径部分也给代理走。 下面四种情况分别用http://192.168.1.4/proxy/test.html 进行访问。
第一种:
location /proxy/ {
proxy_pass http://127.0.0.1:81/;
}
会被代理到http://127.0.0.1:81/test.html 这个url 第二咱(相对于第一种,最后少一个 /)
location /proxy/ {
proxy_pass http://127.0.0.1:81;
}
会被代理到http://127.0.0.1:81/proxy/test.html 这个url 第三种:
location /proxy/ {
proxy_pass http://127.0.0.1:81/ftlynx/;
}
会被代理到http://127.0.0.1:81/ftlynx/test.html 这个url。 第四种情况(相对于第三种,最后少一个 / ):
location /proxy/ {
proxy_pass http://127.0.0.1:81/ftlynx;
}
会被代理到http://127.0.0.1:81/ftlynxtest.html 这个url 上面的结果都是本人结合日志文件测试过的。从结果可以看出,应该说分为两种情况才正确。即http://127.0.0.1:81 (上面的第二种) 这种和 http://127.0.0.1:81/.... (上面的第1,3,4种) 这种。 -----------------------------------------------------------------------------------------
nginx proxy_pass末尾神奇的/
http://backend;和http://backend/;有什么区别呢? location /service/ {
proxy_pass http://backend;
proxy_next_upstream error timeout invalid_header http_500 http_503 http_404;
}
location /service/ {
proxy_pass http://backend/;
proxy_next_upstream error timeout invalid_header http_500 http_503 http_404;
}
同样访问:http://neverstay.com/service/add.php
前者配置,在后端的机器,收到的是http://neverstay.com/service/add.php
后者配置,在后端的机器,收到的是http://neverstay.com/add.php
如果换成下面这样,会报错:
location ~ ^/(service)/ {
proxy_pass http://backend/;
proxy_next_upstream error timeout invalid_header http_500 http_503 http_404;
}
"proxy_pass" may not have URI part in location given by regular expression, or inside named location, or inside the "if" statement, or inside the "limit_except" block in nginx.conf:
但是,这样就没问题了:
location ~ ^/(service)/ {
proxy_pass http://backend;
proxy_next_upstream error timeout invalid_header http_500 http_503 http_404;
}
把proxy_pass末尾的斜线去掉,就可以了。
3.
启动nginx,进入目录 E:\nginx,点击空白处,按住Shift + 鼠标右键 --> 点击“在此处打开命令窗口”,输入命令:
启动:start nginx
停止:nginx -s stop
重启:nginx -s reload
4.
访问 http://localhost/前端项目名/index.html
5.
ajax接口访问地址由原来的 http://127.0.0.1:8080/api/xxx...
变成:/apis/api/xxx...
附:使用nginx后,后台获取请求头的一些信息。
###### 不用nginx代理
referer--------------http://localhost:8066/index.html
accept-language--------------zh-CN,zh;q=0.9
cookie--------------Hm_lvt_b393d153aeb26b46e9431fabaf0f6190=1510729582; Idea-d796403=72c2352f-4ec9-4a5f-8ccf-15f7de01060b; JSESSIONID=ae31cfd7-b6d7-4c89-af96-a1496fff62c3
host--------------localhost:8066
upgrade-insecure-requests--------------1
connection--------------keep-alive
accept-encoding--------------gzip, deflate, br
user-agent--------------Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
accept--------------text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 ###### 使用nginx代理,但不配置可获取客户端真实ip地址
referer--------------http://127.0.0.1/soeasy/soeasy-web/src/main/webapp/index.html
accept-language--------------zh-CN,zh;q=0.9
cookie--------------Idea-d796403=72c2352f-4ec9-4a5f-8ccf-15f7de01060b; JSESSIONID=c36ff1a3-f4f6-46aa-936f-26474a4b31b2
host--------------127.0.0.1:8066
upgrade-insecure-requests--------------1
connection--------------close
accept-encoding--------------gzip, deflate, br
user-agent--------------Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
accept--------------text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 ###### 使用nginx代理,并且配置可获取客户端真实ip地址
x-real-ip--------------127.0.0.1
referer--------------http://localhost/soeasy/soeasy-web/src/main/webapp/index.html
accept-language--------------zh-CN,zh;q=0.9
cookie--------------Hm_lvt_b393d153aeb26b46e9431fabaf0f6190=1510729582; Idea-d796403=72c2352f-4ec9-4a5f-8ccf-15f7de01060b; JSESSIONID=c0de95b1-71da-41d9-a70b-62e8fb5d2a66
host--------------localhost
upgrade-insecure-requests--------------1
connection--------------close
x-forwarded-for--------------127.0.0.1
accept-encoding--------------gzip, deflate, br
user-agent--------------Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
accept--------------text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
使用nginx反向代理解决前端跨域问题的更多相关文章
- 项目部署问题:xftp无法连接服务器、Nginx403 Forbidden解决、nginx反向代理解决前端跨域问题
一.xftp无法连接服务器 在xftp中配置正确的ip,用户名和密码后,居然无法连接 解决方案:将协议里面的FTP换成SFTP,注意换成SFTP后端口就默认换成22,要还是原来的21就还是连不上的哈 ...
- nginx反向代理-解决前端跨域问题
1.定义 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源.注意:跨域限制访 ...
- 利用nginx做反向代理解决前端跨域问题
最近朋友再群里提了一个问题,他们公司给他提供了一个获取数据的接口,在浏览器访问这个接口能获取到json数据,但是放在项目里使用ajax就产生了跨域问题,一般这个需要提供接口的后台方面需要做跨域处理,但 ...
- Nginx反向代理解决iframe跨域问题
前言 这几天有个需求:做个表单页面,要求后台人员能自定义发布表单,用户来填写表单.我一想,这不麦克表单有现成的吗,拿来就用!发布表单后,可以选择使用iframe方式嵌入网站,一切顺利. 当时的网站是h ...
- 使用webpack-dev-server设置反向代理解决前端跨域问题
webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外,它还有一个通过Sock.j ...
- 简单配置nginx反向代理,实现跨域请求
简单配置nginx去做反向代理,实现跨域请求 简单介绍nginx的nginx.conf最核心的配置,去做反向代理,实现跨域请求. 更多详细配置,参考nginx官方文档 先介绍几个nginx命令 打开n ...
- nginx 反向代理,支持跨域,前后分离
前端开发往往涉及到跨域问题,其中解决方案很多: 1.jsonp 需要目标服务器配合一个callback函数. 2.window.name+iframe 需要目标服务器响应window.name. 3. ...
- Nginx反向代理配置可跨域
由于业务需要,同一项目中的前端代码放在静态环境中,而后端代码放在tomcat中,但此时问题却出现了:前端使用ajax请求后端获取数据时出现如下报错 XMLHttpRequest cannot load ...
- nginx 配置反向代理解决请求跨域问题
server { listen ; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; roo ...
随机推荐
- Oracle sql%rowcount 返回影响行数;sql server @@RowCount返回影响行数
sql server中,返回影响行数是:If @@RowCount<1 Oracle中,返回影响行数是:If sql%rowcount<1 例: sqlserver: create pro ...
- java多线程 21 : ReentrantReadWriteLock ,synchronized和ReentrantLock的对比
读写锁ReentrantReadWriteLock概述 大型网站中很重要的一块内容就是数据的读写,ReentrantLock虽然具有完全互斥排他的效果(即同一时间只有一个线程正在执行lock后面的任务 ...
- PowerShell实现基于SharePoint的网站HomePage Auto-Upgrade Solution
*** Solution Auto-Upgrade Solution Tuesday, January 06, 2015 PS:该项目为公司项目,我还是给他的名字屏蔽掉吧,这是我用PowerShell ...
- Node.js学习笔记(2)--提交表单
说明(2017-5-2 11:42:33): 1. index.html <!DOCTYPE html> <html lang="en"> <head ...
- ARKit从入门到精通(10)-ARKit让飞机绕着你飞起来
1.1-ARKit物体围绕相机旋转流程介绍 1.2-完整代码 1.3-代码下载地址 废话不多说,先看效果 其实是会一直围着你转圈的,只不过笔者不好意思暴露家里的场景,所以请读者朋友们见谅~ 由于是晚上 ...
- golang后台任务库
功能需求 本来想用linux自带的corntab,然而corn调试困难,而且不支持以下需求 能分布式 有http接口 能调试 有统计 kala 这个需求也不算小众,于是在网上查了一下,果然有,而且还比 ...
- WebSphere ILog JRules 域的介绍和定制
WebSphere ILog JRules 域的介绍和定制 引言 随着企业业务的不断发展,越来越多的企业正经历着以下的情形: 企业需要对于业务系统的频繁变化做出及时的关注和响应,例如,竞争对手或经济环 ...
- Nosql相关产品和分布式相关中间件
1.memcached 2.redis 3.mongodb 4.消息队列的运用
- windows 下,CCXT库的安装
CCTX 是一个 开源的关于数字货币交易的库 github 位置: https://github.com/ccxt/ccxt CCTX python 版本的安装 先安装python 3 然后以管理员的 ...
- .NET中常见加解密算法
一.MD5不可逆加密 不可逆加密是指将原文加密成密文以后,无法将密文解密成原文. MD5的算法是公开的,无论是哪种语言,只要需要加密的字符串是相同的,那么经过MD5加密以后生成的结果都是一样的. .N ...