nginx反向代理解决跨域

  上面已经说到,禁止跨域问题其实是浏览器的一种安全行为,而现在的大多数解决方案都是用标签可以跨域访问的这个漏洞或者是技巧去完成,但都少不了目标服务器做相应的改变,而我最近遇到了一个需求是,目标服务器不能给予我一个header,更不可以改变代码返回个script,所以前5种方案都被我否决掉。最后因为我的网站是我自己的主机,所以我决定搭建一个nginx并把相应代码部署在它的下面,由页面请求本域名的一个地址,转由nginx代理处理后返回结果给页面,而且这一切都是同步的。

  关于nginx的一些基本配置和安装请看我的另一篇博客,下面直接讲解如何配置一个反向代理。

  首先找到nginx.conf或者nginx.conf.default 或者是default里面的这部份

  其中server代表启动的一个服务,location 是一个定位规则。


1

2

3

4

5

6

7

location /{   #所有以/开头的地址,实际上是所有请求

root  html     #去请求../html文件夹里的文件,其中..的路径在nginx里面有定义,安装的时候会有默认路径,详见另一篇博客

index  index.html index.htm  #首页响应地址

  

  从上面可以看出location是nginx用来路由的入口,所以我们接下来要在location里面完成我们的反向代理。

  假如我们我们是www.a.com/html/msg.html 想请求www.b.com/api/?method=1&para=2;

  我们的ajax:


1

2

3

4

5

6

7

var url = ‘http://www.b.com/api/msg?method=1&para=2‘

<br>$.ajax({

type: "GET",

url:url,

success: function(res){..},

....

})

  

  上面的请求必然会遇到跨域问题,这时我们需要修改一下我们的请求url,让请求发在nginx的一个url下。


1

2

3

4

5

6

7

8

9

var url = ‘http://www.b.com/api/msg?method=1&para=2‘

var proxyurl = ‘msg?method=1&para=2‘

//假如实际地址是 www.c.com/proxy/html/api/msg?method=1&para=2; www.c.com是nginx主机地址

 $.ajax({

type: "GET",

url:proxyurl,

success: function(res){..},

....

})  

  

  

  再在刚才的路径中匹配到这个请求,我们在location下面再添加一个location。


1

2

3

4

location ^~/proxy/html/{

rewrite ^/proxy/html/(.*)$ /$1 break;

proxy_pass http://www.b.com/;

}

以下做一个解释

1.‘^~ /proxy/html/ ‘

  就像上面说的一样是一个匹配规则,用于拦截请求,匹配任何以 /proxy/html/开头的地址,匹配符合以后,停止往下搜索正则。

2.rewrite ^/proxy/html/(.*)$ /$1 break;

  代表重写拦截进来的请求,并且只能对域名后边的除去传递的参数外的字符串起作用,例如www.c.com/proxy/html/api/msg?method=1&para=2重写。只对/proxy/html/api/msg重写。

  rewrite后面的参数是一个简单的正则 ^/proxy/html/(.*)$ ,$1代表正则中的第一个(),$2代表第二个()的值,以此类推。

  break代表匹配一个之后停止匹配。

3.proxy_pass

  既是把请求代理到其他主机,其中 http://www.b.com/ 写法和 http://www.b.com写法的区别如下:

不带/


1

2

3

4

location /html/

{

  proxy_pass http://b.com:8300; 

}

带/


1

2

3

4

location /html/ 

    proxy_pass http://b.com:8300/; 

}

上面两种配置,区别只在于proxy_pass转发的路径后是否带 “/”。

  针对情况1,如果访问url = http://server/html/test.jsp,则被nginx代理后,请求路径会便问http://proxy_pass/html/test.jsp,将test/ 作为根路径,请求test/路径下的资源。

  针对情况2,如果访问url = http://server/html/test.jsp,则被nginx代理后,请求路径会变为 http://proxy_pass/test.jsp,直接访问server的根资源。

修改配置后重启nginx代理就成功了。

原文地址:https://www.cnblogs.com/cheyunhua/p/8110489.html

时间: 2024-11-05 11:31:56

nginx反向代理解决跨域的相关文章

前端通过Nginx反向代理解决跨域问题

本文探讨了前端如何通过Nginx反向代理的方式解决跨域问题. 跨域 再次重申: 跨域是浏览器行为,不是服务器行为. 实际上,请求已经到达服务器了,只不过在回来的时候被浏览器限制了.就像Python他可以进行抓取数据一样,不经过浏览器而发起请求是可以得到数据,想到通过Nginx的反向代理来解决跨域问题. 代理 所谓代理就是在我们和真实的服务器之间有一台代理服务器,我们所有的请求都是通过它来进行转接的. 正向代理 正向代理就是我们访问不了Google,但是我在国外有一台vps,它可以访问Google

【nginx学习】nginx反向代理前端跨域问题

* 跨域简介: 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源. 注意:跨域限制访问,其实是浏览器的限制. 跨域类型: URL 说明 是否跨域 http://www.cnblogs.com/a.js http://www.a.com/b.js 不同域名 是 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域

nginx反向代理和跨域

server { listen 80; #listen [::]:80; server_name weather.xxx.com ; index index.html index.htm index.php default.html default.htm default.php; include none.conf; #error_page 404 /404.html; location / { add_header 'Access-Control-Allow-Origin' "*"

nginx反向代理-解决前端跨域问题

1.定义 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源.注意:跨域限制访问,其实是浏览器的限制.理解这一点很重要!!! 2.跨域访问示例 假设有两个网站,A网站部署在:http://localhost:81 即本地ip端口81上:B网站部署在:http://localhost:82 即本地ip端口82上. 现在A网站的页面想去访问B网站的信息,A网站页面的代码如下(这里

nginx 反向代理解决ajax跨域问题

~~写了段ajax 去请求接口数据的js ,无奈发现有跨域问题. <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>index</title> </head><body&g

nginx反向代理解决wechat图片问题

在nginx 中nginx.conf开启反向代理 1 location ^~ /wechat_image/ { 2 add_header 'Access-Control-Allow-Origin' "$http_origin" always; 3 add_header 'Access-Control-Allow-Credentials' 'true' always; 4 add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' a

Nginx转发地址解决跨域问题

什么是跨域问题 在一个服务器A里放置了json文件,另一个服务器B想向A发送ajax请求,获取此文件,会发生错误. Chrome提示: XMLHttpRequest cannot load ******. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. 这就是跨域问题.解决方案有不少,比较好的是服

vue-webpack项目本地开发环境设置代理解决跨域问题

前言: 一般跨域问题只要后端配置好的话,是不需要前端做处理的,但也不能保证你遇到的所有后端都能很好的处理这个问题,这个时候可能就需要前端设置代理解决这个问题了. 配置方法: 1. config/index.js proxyTable: { '/api': { target: 'http://192.168.8.8:8080', // 要访问接口的域名 // secure: false, // 如果是https接口,需要配置这个参数 changeOrigin: true, // 如果接口跨域,需要

使用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_