一.编一个服务器端servlet

    @RequestMapping("/haha")

    @ResponseBody

    String haha(String haha, HttpServletRequest req, HttpServletResponse resp) {

        //resp.addHeader("Access-Control-Allow-Origin", "null");

        System.out.println(haha);

        System.out.println("you accessed!!!");

        return haha + " : " + req.getMethod();

    }

如果服务器回复的头部Access-Control-Allow-Origin属性中包含请求的Origin,那么客户端就可以通过ajax访问.

我用的是spring mvc,如果RequestMapping不带参数,默认为'/',相当于映射一切url;如果请求的url找不到,那就去找它.

无参数的RequestMapping只允许有一个,否则无法部署,报错.因为最后兜底的只能有一个servlet.

在spring mvc中,如果没有规定请求方式,默认是都可以,无论是get还是post都能够找到资源,只要url正确就行.

二.ajax方式请求

1.如果设置了头部就会出错(ajax设置了headers就会出错)

Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'null' is therefore not allowed access. The response had HTTP status code 403.

preflight意为起飞前,航前,pre 在...之前,flight航班

请求在起飞前没有通过,请求被扼杀在摇篮里.

2.如果不设置头部,可以把请求发送出去

No 'Access-Control-Allow-Origin' header is present on the requested resource.

Origin 'null' is therefore not allowed access.

下面用ajax请求这个servlet

<body>

    <h1 id='resp'></h1>

        <input id='haha' type='text'></input>

</body>

<script type="text/javascript">

    $('#haha').keydown(function(event) {

        console.log(event.which)

        if(event.which==13){

            $.get('http://localhost:8080/news/haha',{'haha':'wyf'},function(data){

                console.log(data)

                console.log('get over')

            })

        }

    });

</script>

服务器端输出了"you succeed!!!",这说明对于跨域请求服务器是搭理了的,问题出在服务器禁止返回或者是浏览器不允许用户查看返回的内容.

据我猜测,很有可能是后者,即:chrome分析返回结果,发现跨域了,于是不让用户看了.

如果用java代码通过httpclient或者urlConnection来实现,是能够收到回复的.所以很有可能,结果返回来了,浏览器不让看.

三.解决方案之修改服务器

只需要在服务器上添加一句允许Origin就可以了,如果允许任何一个网站访问,那么就设置为'*'就可以了.

resp.addHeader("Access-Control-Allow-Origin", "null");

四.解决方案之虚拟表单

解决方案很简单:编一个表单进行提交,因为只有ajax才存在跨域访问问题,而提交表单跟ajax不一样.

提交表单之后服务器端决定了浏览器端页面的跳转,把权力完全交给了服务器,而ajax只是通过服务器获取数据

下面的表单是可以提交成功的

    <form action='http://localhost:8080/news/haha' method="GET">

        <input id='haha' type='text'></input>

        <input type="submit"></input>

    </form>

可是填写表单太麻烦,于是可以虚拟表单并提交

    $(document).ready(function(){

        var form=$('<form></form>')

        $(form).attr({"action":'http://localhost:8080/news/haha',"method":'post'}).append("<input name='haha' value='haha weidiao'>")

        $(form).submit()

        console.log('haha')

    })

五.同源策略

同源策略(Same-Origin Policy)阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。如果它们的协议、端口（如果指明了的话）和主机名都相同。则他们属于同源。

同源策略就是禁止外人访问我的资源,是一种安全机制.它是浏览器采用的策略.

六.jsonp

完全不同的两个域的访问，如www.360.cn和www.360safe.com的互相访问
这种情况通过javascript语言本身就无法解决了，需要借助<javascript>标签的特性和jsonp协议，在html文档里使用<javascript>标签时有个src属性，这个属性对于url的域名是没有任何限制的，jsonp全名json with padding。
一个简单的做法就是利回调函数
<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>Test Jsonp</title>

<script type="text/javascript">

         function jsonpCallback(result)

         {

alert(result.msg);

         }

     </script>

<script type="text/javascript" src="http://test.com/test.php?jsonp=jsonpCallback"></script>

</head>

<body>

</body>

</html>

服务端的代码:

<?php

echo $_GET['jsonp']."({msg:'this is json data'})";

?>

从JSONP的原理来看的话，script标签只能GET方式。还有就是后台程序需要对callback参数进行有效性过滤，不然恶意用户可以插入攻击代码了。一般使用正则：

^[a-z0-9_]+$

来判断用户的回调函数名是否合法。

七.浏览器不让看

chrome 等浏览器 对于 跨域请求并要求设置Headers自定义参数的时候的 "预请求"   就是如果遇到 跨域并设置headers的请求，所有请求需要两步完成！

A 第一步：发送预请求 OPTIONS 请求。此时 服务器端需要对于OPTIONS请求作出响应 一般使用202响应即可 不用返回任何内容信息。

B 第二步：服务器accepted 第一步请求后 浏览器自动执行第二步 发送真正的请求。此时 大多数人 会发现请求成功了，但是 有那么几个人会发现 请求成功了但是没有任何信息返回 why？因为你自定义的请求头在服务器响应中不存在！

[转]Ajax跨域请求的更多相关文章

  1. Laravel中的ajax跨域请求

    最近接触Laravel框架ajax跨域请求的过程中遇到一些问题,在这里做下总结. 一开始发起ajax请求一直报500错误,搜索相关资料后发现Laravel要允许跨域请求可以加入Cors中间件,代码如下 ...

  2. 浅谈linux 下，利用Nginx服务器代理实现ajax跨域请求。

    ajax跨域请求对于前端开发者几乎在任何一个项目中都会用到,众所周知,跨域请求有三种方式: jsonp; XHR2 代理: jsonp: 这种应该是开发中是使用的最多的,最常见的跨域请求方法,其实aj ...

  3. 解决ajax跨域请求 （总结）

    ajax跨域请求,目前已用几种方法实现:   1)用原生js的xhr对象实现.                var url="http://freegeoip.net/json/" ...

  4. ASP.NET MVC 实现AJAX跨域请求方法《1》

    ASP.NET MVC 实现AJAX跨域请求的两种方法 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据 ...

  5. $.ajax 跨域请求 Web Api

    WepApi确实方便好用,没有配置文件,一个apicontroller直接可以干活了.但今天用$.ajax跨域请求的时候总是获取不到数据,用fiddler一看确实抓到了数据,但回到$.ajax函数中, ...

  6. JQuery的Ajax跨域请求原理概述及实例

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuer ...

  7. Nginx 实现AJAX跨域请求

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

  8. jQuery ajax跨域请求的解决方法

    在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数 ...

  9. php中ajax跨域请求---小记

    php中ajax跨域请求---小记   前端时间,遇到的一个问题,情况大约是这样: 原来的写法: 前端js文件中: $.ajax({ type:'get', url:'http://wan.xxx.c ...

  10. jquery ajax跨域请求详解

    本文章来给大家详细jquery中的ajax跨域请求, 在JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的jquery.ajax jsonp格式和jque ...

随机推荐

  1. 排序及重复元素去重的说明，TreeSet,HashSet

    先看下面一段代码: package 类集; import java.util.Set; import java.util.TreeSet; class Person{ private String n ...

  2. Vs 2015 调试ASP.NET Core修改监听端口

    如何改变监听IP地址和端口?在这里找到了答案:https://github.com/aspnet/KestrelHttpSer... 把Program.cs加一行UseUrls代码如下: using ...

  3. 关于Xcode7.2版本访问相册问题

    前些天自己将xcode升级到7.2版本后,在我写的代码中有需要访问到相册的功能,但是却发现被告知无权限 一开始以为是手机问题,在设置里面找也没有找到,然后看代码,但是代码也没问题,后来才发现是我的pl ...

  4. Android fragment之间消息传递

    1. 在Fragment里定义一个内部接口, 在Fragment初始化方法里, 把父Activity转换成这个接口, 赋值给成员变量 public class DummyFragment extend ...

  5. java:快速文件分割及合并

    文件分割与合并是一个常见需求,比如:上传大文件时,可以先分割成小块,传到服务器后,再进行合并.很多高大上的分布式文件系统(比如:google的GFS.taobao的TFS)里,也是按block为单位, ...

  6. Wcf:可配置的服务调用方式

    添加wcf服务引用时,vs.net本来就会帮我们在app.config/web.config里生成各种配置,这没啥好研究的,但本文谈到的配置并不是这个.先看下面的图: 通常,如果采用.NET的WCF技 ...

  7. Logging的这点小事

    真正做项目,才发觉Logging的好处和学问.自己胡搞的时候,常常使用System.out.println作为输出. 但实际的项目,尤其是library比较多的时候,好好配置好Logging,才能在后 ...

  8. 基于DDD的.NET开发框架 - ABP Session实现

    返回ABP系列 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称. ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应 ...

  9. Jquery 页面首次加载方式

    $(document).ready(function(){ alert("111"); }); $(function(){ alert("222"); }); ...

  10. ASP.NET网站入侵第二波（LeaRun.信息化快速开发框架 已被笔者拿下）

    笔者小学文化,语言组织能力差,写的不通的地方请大家将就着看,不喜勿喷. 上篇我讲了如何在上传文件中入侵服务器,這次我们稍微多讲一点. 还是先讲下流程: 1.上传代码页面  我上传的是ashx页面. 2 ...