1.什么是跨域以及产生原因 跨域情况如下:
url 说明 是否跨域
1.jsonp 需要目标服务器配合一个callback函数。 2.window.name+iframe 需要目标服务器响应window.name。 3.window.location.hash+iframe 同样需要目标服务器作处理。 4.html5的 postMessage+ifrme 这个也是需要目标服务器或者说是目标页面写一个postMessage,主要侧重于前端通讯。 5.CORS 需要服务器设置header :Access-Control-Allow-Origin。 6.nginx反向代理 这个方法一般很少有人提及,但是他可以不用目标服务器配合,不过需要你搭建一个中转nginx服务器,用于转发请求。
3.nginx反向代理解决跨域
关于nginx的一些基本配置和安装请看我的另一篇博客,下面直接讲解如何配置一个反向代理。
首先找到nginx.conf或者nginx.conf.default 或者是default里面的这部份
其中server代表启动的一个服务,location 是一个定位规则。
location /{ #所有以/开头的地址,实际上是所有请求 从上面可以看出location是nginx用来路由的入口,所以我们接下来要在location里面完成我们的反向代理。 假如我们我们是www.a.com/html/msg.html 想请求www.b.com/api/?method=1¶=2; 我们的ajax:
var url = 'http://www.b.com/api/msg?method=1¶=2'; 上面的请求必然会遇到跨域问题,这时我们需要修改一下我们的请求url,让请求发在nginx的一个url下。
var url = 'http://www.b.com/api/msg?method=1¶=2';
再在刚才的路径中匹配到这个请求,我们在location下面再添加一个location。
location ^~/proxy/html/{ 就像上面说的一样是一个匹配规则,用于拦截请求,匹配任何以 /proxy/html/开头的地址,匹配符合以后,停止往下搜索正则。 2.rewrite ^/proxy/html/(.*)$ /$1 break; 代表重写拦截进来的请求,并且只能对域名后边的除去传递的参数外的字符串起作用,例如www.c.com/proxy/html/api/msg?method=1¶=2重写。只对/proxy/html/api/msg重写。 rewrite后面的参数是一个简单的正则 ^/proxy/html/(.*)$ ,$1代表正则中的第一个(),$2代表第二个()的值,以此类推。 break代表匹配一个之后停止匹配。 3.proxy_pass 既是把请求代理到其他主机,其中 http://www.b.com/ 写法和 http://www.b.com写法的区别如下: 不带/
location /html/
location /html/ 针对情况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代理就成功了。
(责任编辑:IT) |