1.什么是跨域以及产生原因

　　跨域是指a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，或是a页面为ip地址，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	同一域名下不同文件夹	否
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	是
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同协议	是
http://www.a.com/a.js http://70.32.92.74/b.js	域名和域名对应ip	是
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	是（cookie不可访问）
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名（同上）	是

2.跨域的常见解决方法

目前来讲没有不依靠服务器端来跨域请求资源的技术

　　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反向代理解决跨域

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

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

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

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

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：

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

<br>$.ajax({

type: "GET",

url:url,

success: function(res){..},

....

})

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

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。

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写法的区别如下:

不带/

location /html/

{

　　proxy_pass http://b.com:8300;

}

带/

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代理就成功了。

参考：http://seanlook.com/2015/05/17/nginx-location-rewrite/

http://www.jbxue.com/article/2187.html

Nginx配置跨域请求 Access-Control-Allow-Origin *

   location ~ [^/]\.php(/|$) {fastcgi_pass php5.5:9000;#fastcgi_pass unix:/dev/shm/php-cgi.sock;fastcgi_index index.php;include fastcgi.conf;#if ($http_origin ~* (http?://.*\.17byh\.com$)) {add_header Access-Control-Allow-Origin $http_origin;add_header 'Access-Control-Allow-Credentials' 'true';add_header 'Access-Control-Allow-Methods' 'GET,POST';#}}

目标设置允许跨域：

http://blog.51cto.com/13523664/2060430

nginx 反向代理机制解决前端跨域问题相关推荐

Nginx 代理解决前端跨域问题
目录一.什么是 nginx 二.nginx 的用途三.代理 1.正向代理 2.反向代理四.nginx.conf 配置文件的基本结构五.nginx 的内置变量六.nginx 解决跨域的原理七 ...
微服务架构（5）：nginx反向代理cors解决跨域
微服务架构(5):nginx反向代理&&cors解决跨域学习目标 1.使用域名访问本地项目 1.1.统一环境 1.2.域名解析 1.3.解决域名解析问题 1.4.nginx解决端口问 ...
使用webpack-dev-server设置反向代理解决前端跨域问题
使用webpack-dev-server设置反向代理解决前端跨域问题参考文章: (1)使用webpack-dev-server设置反向代理解决前端跨域问题 (2)https://www.cnblog ...
如何用Nginx解决前端跨域问题？
如何用Nginx解决前端跨域问题? 参考文章: (1)如何用Nginx解决前端跨域问题? (2)https://www.cnblogs.com/lovesong/p/10269793.html 备忘一 ...
jsonp-反向代理-CORS解决JS跨域问题的个人总结
jsonp-反向代理-CORS解决JS跨域问题的个人总结网上说了很多很多,但是看完之后还是很混乱,所以我自己重新总结一下. 解决 js 跨域问题一共有8种方法, jsonp(只支持 get) 反向代 ...
解决前端跨域的几种方法
解决前端跨域的几种方法了解跨域出现的原因解决跨域的几种方法想要解决跨域先要知道为什么会出现跨域跨域:指的是浏览器不能执行其他网站的脚本它是由浏览器的同源策略造成的是浏览器对javascr ...
webpack+vue解决前端跨域问题
webpack+vue解决前端跨域问题参考文章: (1)webpack+vue解决前端跨域问题 (2)https://www.cnblogs.com/wei-dong/p/10689072.html ...
nginx反向代理配置解决不同域名默认页面不同问题
nginx反向代理配置解决不同域名默认页面不同问题背景设计思路步骤背景需求:使用同一个项目(http://localhost:8080/thzhdj)映射两个域名(test1.com,tes ...
Vue Nginx反向代理配置解决生产环境跨域
Vue本地代理举例: module.exports = {publicPath: './',devServer: {proxy: {'/api': {target: 'https://movie.do ...
前端交互之“解决前端跨域的三种方法”
1.什么是前端跨域? 跨域是浏览器为了安全而做出的限制策略:浏览器请求必须遵从同源测试: http://www.bilibili.com:8080:/anime/?key=calue路径键值对同协 ...

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