ajax跨域请求对于前端开发者几乎在任何一个项目中都会用到,众所周知,跨域请求有三种方式:

  1. jsonp;

  2. XHR2

  3. 代理;

jsonp:

这种应该是开发中是使用的最多的,最常见的跨域请求方法,其实ajax本身是不可以跨域的,通过产生一个script标来实现跨域。因为script标签的src属性是没有跨域的限制的。

其实设置了dataType: 'jsonp'后,$.ajax方法就和ajax XmlHttpRequest没什么关系了,取而代之的则是JSONP协议。JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问。但是最大的缺点就是只支持get方式只支持get方式,只支持get方式

实现原理:

  1. <script>
  2. $(document).ready(function() {
  3. var cache = {};
  4. $("#demo").click(function(){
  5. $.ajax({
  6. type : "get",
  7. async:false,
  8. data:{"name":"test001","age":"100"},
  9. url : "http://192.168.136.129/servertest.php", //跨域请求的URL
  10. dataType : "jsonp",
  11. //传递给请求处理程序,用以获得jsonp回调函数名的参数名(默认为:callback)
  12. jsonp: "callback",
  13. //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
  14. jsonpCallback:"success_jsonpCallback",
  15. //成功获取跨域服务器上的json数据后,会动态执行这个callback函数
  16. success : function(json){
  17. alert(json,name);
  18. }
  19. });
  20. });
  21. })
  22. </script>

服务器端servertest.php代码

  1. <?php
  2. $arr['id']=1;
  3. $arr['name']="小明";
  4. $data[]=$arr;
  5. $arr['id']=2;
  6. $arr['name']="小红";
  7. $data[]=$arr;
  8. $data=json_encode($data);
  9. $callback = $_GET['jsoncallback'];
  10. echo $callback."(" .$data.")";

XHR2:

这是HTML5中提供的XMLHTTPREQUEST Level2(及XHR2),已经实现了跨域访问。但ie10以下不支持,但ie10以下不支持,但ie10以下不支持,

不过在于操作简单,只需要在服务端填上响应头:

  1. header("Access-Control-Allow-Origin:*");
  2. /*星号表示所有的域都可以接受,*/
  3. header("Access-Control-Allow-Methods:GET,POST");

也许以后是一个趋势。

 

服务器代理:

这种方案估计用的最少,因为你首先得有一个代理服务器才行,对于小型项目来讲,这个几乎都不会去碰它,下面我就简单介绍一下在linux下搭建nginx代理服务器。

我用的是 nginx-1.10.1.tar.gz 进行安装,测试,

安装就不细说了,上传包nginx-1.10.1.tar.gz和依赖zlib-1.2.8.tar.gz;pcre-8.39.tar.gz,挂载,

安装必要的依赖:

yum --disablerepo=\* --enablerepo=c6-media install gcc gcc-c++ openssl openssl-devel cyrus-sasl-md5

解压

tar zxvf nginx-1.10.1.tar.gz
tar zxvf zlib-1.2.8.tar.gz
tar zxvf pcre-8.39.tar.gz

安装:

cd nginx-1.10.1  //进入目录

./configure --prefix=/usr/local/nginx --with-http_ssl_module --with-pcre=../pcre-8.39 --with-zlib=../zlib-1.2.8

//编译安装

make && make install

找到配置文件,Nginx.conf 修改必要端口(当然,你80没用可以不改)

代码:

server {
listen 8024;
server_name proxy.nginx.com; location ~* ^/ajax/.* {
#请求的主机域名;
proxy_set_header Host $host;
#转的目标IP;
proxy_set_header X-Real-IP $remote_addr;
#转发的目标
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#禁止缓冲
proxy_buffering off;
proxy_pass http://192.168.136.126:8080; }
}

重启nginx:(nginx -s reload)  (需要在/etc/profile文件中设置环境变量)

然后访问:

http://proxy.nginx.com:8024/ajax/yyy  (proxy.nginx.com是自己定义的虚拟主机名。可用localhost,看个人爱好)

http://proxy.nginx.com:8024/ajax/xxx?abc=123

都会被转发到
http://192.168.136.126:8080/ajax/yyy
http://192.168.136.126:8080/ajax/xxx?abc=123

半夜写的不容易,请轻拍!!

浅谈linux 下,利用Nginx服务器代理实现ajax跨域请求。的更多相关文章

  1. 简单配置nginx反向代理,实现跨域请求

    简单配置nginx去做反向代理,实现跨域请求 简单介绍nginx的nginx.conf最核心的配置,去做反向代理,实现跨域请求. 更多详细配置,参考nginx官方文档 先介绍几个nginx命令 打开n ...

  2. 用iframe设置代理解决ajax跨域请求问题

    面对ajax跨域请求的问题,想用代理的方式来解决这个跨域问题.在服务器端创建一个静态的代理页面,在客户端用iframe调用这个代理 今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到aja ...

  3. 浅谈Linux下/etc/passwd文件

    浅谈Linux 下/etc/passwd文件 看过了很多渗透测试的文章,发现在很多文章中都会有/etc/passwd这个文件,那么,这个文件中到底有些什么内容呢?下面我们来详细的介绍一下. 在Linu ...

  4. []转帖] 浅谈Linux下的五种I/O模型

    浅谈Linux下的五种I/O模型 https://www.cnblogs.com/chy2055/p/5220793.html  一.关于I/O模型的引出 我们都知道,为了OS的安全性等的考虑,进程是 ...

  5. Linux下利用nginx实现负载均衡

    linux下利用nginx实现负载均衡 前提条件: 1,安装好jdk 2,安装好tomcat和nginx(可以参考我前两篇文章) 满足前提条件后,要用nginx实现负载均衡,主要是靠配置nginx的配 ...

  6. 项目部署问题:xftp无法连接服务器、Nginx403 Forbidden解决、nginx反向代理解决前端跨域问题

    一.xftp无法连接服务器 在xftp中配置正确的ip,用户名和密码后,居然无法连接 解决方案:将协议里面的FTP换成SFTP,注意换成SFTP后端口就默认换成22,要还是原来的21就还是连不上的哈 ...

  7. 使用Web代理实现Ajax跨域

    目前的工作项目分为前端和后台,双方事先约定接口,之后独立开发.后台每天开发完后在测试服务器上部署,前端连接测试服务器进行数据交互.前端和后台分开的好处是代码不用混在一个工程里一起build,互不干涉. ...

  8. 本地主机作服务器解决AJAX跨域请求访问数据的方法

    近几天学到ajax,想测试一下ajax样例,由于之前在阿里租用的服务器过期了,于是想着让本地主机既做服务器又做客户端,只是简单地测试,应该还行. 于是,下载了xampp,下载网址http://www. ...

  9. Nginx 实现AJAX跨域请求

    在工作中遇到跨域请求的问题: AJAX从一个域请求另一个域会有跨域的问题.那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加add_header Access-Con ...

随机推荐

  1. 利用Photoshop修改图片以达到投稿要求

    摘自:http://www.dxy.cn/bbs/thread/8602152#8602152 利用Photoshop修改图片以达到投稿要求 软件版本为Photoshop CS V8.0.1(中文版) ...

  2. 51nod 1712 区间求和

    题意 给你一个长度为 \(n\) 的序列,定义这个序列的权值为 $ \sum_{1 \leq i<j \leq n} a_j - a_i $. 现在给你一个长度为 \(n\) 的序列,当$ a_ ...

  3. linux 下使用配置文件

    最近鼓捣双机热备,写了些shell脚本 适用配置文件 以 ifbeat 为例,linux的标准的配置文件中等号两遍不能存在括号, 空格 或特殊符号可以用转衣服 ' \' beat=true prima ...

  4. nginx下搭建CodeIgniter问题集锦

    nginx环境下CodeIgniter会出现一些问题! 1.数据库驱动连接失败! 出现如下问题: A PHP Error was encountered Severity: Warning Messa ...

  5. 导航菜单跳转后,新页面上菜单CSS选定

    <div class="menu"> <ul> <li><a href="#" title="网站首页&qu ...

  6. debian下Apache和tomcat整合(使用apt工具)

    最近部署web系统,需要使用tomcat处理和Apache整合使用,tomcat处理JSP,Apache处理静态资源.开始不知道怎么操作,在网上查阅资料走了很多弯路.完成时候,发现其实很简单,现将配置 ...

  7. C#调用exe文件,IIS发布后无法掉用本地exe程序的解决方法

    http://blog.csdn.net/junjieking/article/details/6277836?reload这位楼主的问题,我也遇到了,但是我按照他那样操作并没有解决问题,弄了好久终于 ...

  8. fft练习

    数学相关一直都好弱啊>_< 窝这个月要补一补数学啦, 先从基础的fft补起吧! 现在做了 道. 窝的fft 模板 (bzoj 2179) #include <iostream> ...

  9. lua中基类和“继承机制”

    基类:基类定义了所有对于派生类来说普通的属性和方法,派生类从基类继承所需的属性和方法,且在派生类中增加新的属性和方法. 继承:继承是C++语言的一种重要机制,它允许在已定义的类的基础上产生新类. lu ...

  10. ratina 视网膜屏幕解决方案大全

    第三方教程 http://www.tuicool.com/articles/JBreIn 知乎 https://www.zhihu.com/question/21653056 强烈推荐!!!最牛逼最专 ...