Nginx 实现AJAX跨域请求 – 运维生存时间
你可能喜欢
有回复时邮件通知我
关于本站 本站以分享运维技术为主，欢迎大家参与技术分享，同时也欢迎大家吐槽，本站提供以下交流圈：QQ群①：*****（满）QQ群②：6690706 QQ群③： QQ群④：（新） 微信公众号：ttlsacom 商务合作QQ：
记住我的登录信息
点击“立即注册”转到用户注册页面。
输入用户名或电子邮箱地址，您会收到一封新密码链接的电子邮件。
用户名或电子邮件地址一、什么是跨域简单地理解就是因为JavaScript同源策略的限制，a.com 下的js无法操作b.com或是c.a.com域名下的对象。同源是指相同的协议、域名、端口。特别注意两点：
如果是协议和端口造成的跨域问题“前台”是无能为力的，
在跨域问题上，域仅仅是通过“协议+域名+端口”来识别，两个不同的域名即便指向同一个ip地址，也是跨域的。二、常见跨域情况URL
是否允许通信
http://www.a.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
域名和域名对应ip
http://www.a.com/a.js
http://script.a.com/b.js
主域相同，子域不同
http://www.a.com/a.js
http://a.com/b.js
同一域名，不同二级域名（同上）不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js
http://www.a.com/b.js
不允许特别注意两点：第一，如果是协议和端口造成的跨域问题“前台”是无能为力的，第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。“URL的首部”指window.location.protocol +window.location.host，也可以理解为“Domains, protocols and ports must match”。三、跨域解决方案有多种，大多是利用JS Hack1、document.domain+iframe的设置2、动态创建script3、利用iframe和location.hash4、window.name实现的跨域数据传输5、使用HTML5 postMessage6、利用flash
以上方案见http://www.cnblogs.com/rainman/archive//1959325.html#m57、nginx反向代理 这个方法一般很少有人提及，但是他可以不用目标服务器配合，不过需要你搭建一个中转nginx服务器，用于转发请求。8、Jquery JSONP(本质上就是动态创建script)http://www.cnblogs.com/chopper/archive//2403945.html9、跨域资源共享（CORS） 这就是我们要介绍的跨域解决方案，也是未来的跨域问题的标准解决方案四、关于CORSCORS: 跨域资源共享(Cross-Origin Resource Sharing)http://www.w3.org/TR/cors/当前几乎所有的浏览器（Internet Explorer 8+， Firefox 3.5+， Safari 4+和 Chrome 3+）都可通过名为跨域资源共享（Cross-Origin Resource Sharing）的协议支持ajax跨域调用。(see: http://caniuse.com/#search=cors)Chrome, Firefox, Opera and Safari 都使用的是 XMLHttpRequest2 对象， IE使用XDomainRequest。XMLHttpRequest2的Request属性：open()、setRequestHeader()、timeout、withCredentials、upload、send()、send()、abort()。XMLHttpRequest2的Response属性：status、statusText、getResponseHeader()、getAllResponseHeaders()、entity、overrideMimeType()、responseType、response、responseText、responseXML。1、启用 CORS 请求假设您的应用已经在 example.com 上了，而您想要从 www.example2.com 提取数据。一般情况下，如果您尝试进行这种类型的 AJAX 调用，请求将会失败，而浏览器将会出现“源不匹配”的错误。利用 CORS，www.example2.com 服务端只需添加一个HTTP Response头，就可以允许来自 example.com 的请求：Access-Control-Allow-Origin: http://example.comAccess-Control-Allow-Credentials: true（可选）可将 Access-Control-Allow-Origin 添加到某网站下或整个域中的单个资源。要允许任何域向您提交请求，请设置如下：Access-Control-Allow-Origin: *Access-Control-Allow-Credentials: true（可选）其实，该网站 (html5rocks.com) 已在其所有网页上均启用了 CORS。启用开发人员工具后，您就会在我们的响应中看到 Access-Control-Allow-Origin 了。2、CORS方法实现跨域请求要实现CORS跨域，服务端需要这个一个流程:http://www.html5rocks.com/static/images/cors_server_flowchart.png对于简单请求，如GET，只需要在HTTP Response后添加Access-Control-Allow-Origin。对于非简单请求，比如POST、PUT、DELETE等，浏览器会分两次应答。第一次preflight（method: OPTIONS），主要验证来源是否合法，并返回允许的Header等。第二次才是真正的HTTP应答。所以服务器必须处理OPTIONS应答。http://enable-cors.org/server_nginx.html 这里是一个nginx启用COSR的参考配置。流程如下：首先查看http头部有无origin字段；如果没有，或者不允许，直接当成普通请求处理，结束；如果有并且是允许的，那么再看是否是preflight(method=OPTIONS)；如果是preflight，就返回Allow-Headers、Allow-Methods等，内容为空；如果不是preflight，就返回Allow-Origin、Allow-Credentials等，并返回正常内容。首先，在远端需要访问的主机上做设置，假如远端主机是nginx服务，那么添加如下信息即可。server {
listen 80;
server_name tangxiaoyue.
if ( $http_user_agent = "Mozilla/5.0"){
return 403;
location / {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
# Custom headers and headers various browsers *should* be OK with but aren't
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
后面省略。。。
}五、nginx反向代理解决跨域
禁止跨域问题其实是浏览器的一种安全行为，而现在的大多数解决方案都是用标签可以跨域访问的这个漏洞或者是技巧去完成，但都少不了目标服务器做相应的改变，如果目标服务器无法改变的时候，就需要本地服务器实现，本地实现的话，需要搭建一个nginx并把相应代码部署在它的下面，由页面请求本域名的一个地址，转由nginx代理到目标服务器处理后返回结果给页面，而且这一切都是同步的。假如代理服务器地址是 www.c.com/proxy/html/api/msg?method=1=2;
www.c.com是nginx主机地址远端服务器地址：http://www.b.com/api/msg?method=1=2在nginx服务器上做如下配置在location下面再添加一个location。location ^~/proxy/html/{rewrite ^/proxy/html/(.*)$ /$1proxy_pass http://www.b.com/;}以下做一个解释：1.'^~ /proxy/html/ ‘　　就像上面说的一样是一个匹配规则，用于拦截请求，匹配任何以 /proxy/html/开头的地址，匹配符合以后，停止往下搜索正则。2.rewrite ^/proxy/html/(.*)$ /$1　　代表重写拦截进来的请求，并且只能对域名后边的除去传递的参数外的字符串起作用，例如www.c.com/proxy/html/api/msg?method=1=2重写。只对/proxy/html/api/msg重写。　　rewrite后面的参数是一个简单的正则 ^/proxy/html/(.*)$ ,$1代表正则中的第一个(),$2代表第二个()的值,以此类推。　　break代表匹配一个之后停止匹配。
声明：本文内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至： 进行举报，并提供相关证据，工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。1.什么是跨域以及产生原因
　　跨域是指a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，或是a页面为ip地址，b页面为域名地址，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。
　　跨域情况如下：
http://www.cnblogs.com/a.jshttp://www.a.com/b.js
http://www.a.com/lab/a.jshttp://www.a.com/script/b.js
同一域名下不同文件夹
http://www.a.com:8000/a.jshttp://www.a.com/b.js
同一域名，不同端口
http://www.a.com/a.jshttps://www.a.com/b.js
同一域名，不同协议
http://www.a.com/a.jshttp://70.32.92.74/b.js
域名和域名对应ip
http://www.a.com/a.jshttp://script.a.com/b.js
主域相同，子域不同
是（cookie不可访问）
http://www.a.com/a.jshttp://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. &需要服务器设置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 /｛
#所有以/开头的地址，实际上是所有请求
＃去请求../html文件夹里的文件,其中..的路径在nginx里面有定义，安装的时候会有默认路径，详见另一篇博客
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'；
type: "GET",
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主机地址
type: "GET",
url:proxyurl,
success: function(res){..},
　　再在刚才的路径中匹配到这个请求，我们在location下面再添加一个location。
location ^~/proxy/html/{
rewrite ^/proxy/html/(.*)$ /$1
proxy_pass http://www.b.com/;
以下做一个解释：
1.'^~ /proxy/html/ '
　　就像上面说的一样是一个匹配规则，用于拦截请求，匹配任何以&/proxy/html/开头的地址，匹配符合以后，停止往下搜索正则。
2.rewrite ^/proxy/html/(.*)$ /$1
　　代表重写拦截进来的请求，并且只能对域名后边的除去传递的参数外的字符串起作用，例如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//nginx-location-rewrite/
& & & & &http://www.jbxue.com/article/2187.html
阅读(...) 评论()>>> & CSS字体@font-face跨域调用(例如font-awesome)使用子域名之后不能正确显示的解决办法 &
CSS字体@font-face跨域调用(例如font-awesome)使用子域名之后不能正确显示的解决办法
发布者: 匿名
围观次 点赞:1
在原来能正常显示的情况下，因为启动了CDN因此将js、css、图片文件改到子域名访问，以便cdn加速。但是切换后，二级域名使用font-awesome的图片无法正确显示，全部显示框框这是因为浏览器的安全规则，虽然是子域名，但是css跨域载入字体文件的时候被浏览器拦截，导致了显示不正常。Firefox对字体文件有加载限制，也就是说不允许你随便加载别人的字体，防止他人盗用字体。解决办法：1、把字体文件放在你网站根目录下。2、给字体文件的http头里面添加Access-Control-Allow-Origin属性，以控制指定域引用你的字体文件。nginx:server&{
&&&&#&Fix&@font-face&cross-domain&restriction&in&Firefox
&&&&location&~*&\.(ttf|ttc|otf|eot|woff|font.css)$&{
&&&&&&&&add_header&Access-Control-Allow-Origin&&http://yoursite.com&;
}apache:&FilesMatch&&\.(ttf|ttc|otf|eot|woff|font.css)$&&
&&&IfModule&mod_headers.c&
&&&&Header&set&Access-Control-Allow-Origin&&http://yoursite.com&
&&&/IfModule&
&/FilesMatch&&3、添加mineAddType&application/vnd.ms-fontobject&.eot
AddType&font/ttf&.ttf
AddType&font/otf&.otf
AddType&application/x-font-woff&woff
您可能还会对下面的文章感兴趣：当前位置： →
→ 利用nginx解决js跨域调用问题
利用nginx解决js跨域调用问题
& 作者及来源： 自由出土文物 - 博客园 &
&收藏到→_→：
摘要: 利用nginx解决js跨域调用问题
"利用nginx解决js跨域调用问题"：：
转自http://jooben.blog.51cto.com/335
***************************************************************************************************************************************************************************************************************
问题描述：
由于项目需要调用另外一个的数据 ，之前是通过java的抓取方式，不过这样子就需要 后端处理，甚至可能会因为阻塞造成宕机，不值得。
改用nginx来做一个正向代理解决问题：
数据调用接口：
http://abc/webservice/getdata/getvisitcount?id=20021
nginx配置：
& location ~ ^/webservice/{
&&&&&&&& proxy_pass&&&&&&&&&&&&& http://abc；
&&&&&&&& proxy_redirect&&&&&&&&&
&&&&&&&& proxy_set_header&&&&&&& x-real-ip&&&&&& $remote_
&&&&&&&& proxy_set_header&&&&&&& x-forwarded-for $proxy_add_x_forwarded_
通过访问：
http://my.com/webservice/getdata/getvisitcount?id=20021
http://abc/webservice/getdata/getvisitcount?id=20021
&&& function getchatroomnum(){
&&&&&&&&&&&&&&&
.get("http://my.com/webservice/getdata/getvisitcount?id=20021&,
&&&&&&&&&&&&&&&&&&&&&& function (data, textstatus){
&&&&&&&&&&&&&&&&&&&&&&& // 在这里this指向的是ajax请求的选项配置信息
&&&&&&&&&&&&&&&&&&&&&&& if(textstatus=="success"){
&&&&&&&&&&&&&&&&&&&&&&&&&&&
("#chatcountnum").html(data);
&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&& });&
这个已经在生产环境使用，可行的办法。
当然，或许还有其他更加好的办法，，欢迎提出。搜索此文相关文章： 跨域调用问题此文来自: 马开东博客
网址: 站长QQ
利用nginx解决js跨域调用问题_博客园相关文章
博客园_总排行榜
博客园_最新
博客园_月排行榜
博客园_周排行榜
博客园_日排行榜