Ajax跨域访问

最近在做一个项目，需要用到跨域访问，在这里将解决问题的过程与大家分享一下。
JavaScript出于安全方面的考虑，使用同源策略，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。
举例如下：

URL1 URL2 说明 是否允许通信
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 http://127.0.0.1/b.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 不同域名 不允许

对于跨域的问题，在网上也有很多解决方案，很多人都建议使用jsonp，这种方式我认为需要对服务端进行改造，代价稍高，所以在这篇博客中我们不讨论，有兴趣可以查看相关文档，今天我们主要来讨论如何使用响应头的方式来解决跨域的问题。
首先我们先来看看，跨域到底是个什么问题，我显现编写一个服务端的程序用于测试（使用Servlet），

package com.gujin.web;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CrossDomain extends HttpServlet
{
   private static final long serialVersionUID = 1L;

   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
   {
      PrintWriter writer = response.getWriter();
      writer.write("{\"name\":\"jianggujin\"}");
      writer.flush();
      writer.close();
   }

   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
   {
      doGet(request, response);
   }

}

在web.xml中进行相关配置使其生效：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    id="WebApp_ID" version="2.5">
    <display-name>web</display-name>
    <servlet>
        <description></description>
        <display-name>CrossDomain</display-name>
        <servlet-name>CrossDomain</servlet-name>
        <servlet-class>com.gujin.web.CrossDomain</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>CrossDomain</servlet-name>
        <url-pattern>/cd</url-pattern>
    </servlet-mapping>
</web-app>

配置本地host为：www.jianggujin.com，使用浏览器访问http://www.jianggujin.com/web/cd测试一下,浏览本期会显示：{"name":"jianggujin"}。
接下来我们在编写一个本地的网页:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>跨域测试</title>
        <script type="text/javascript">
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.onreadystatechange = function() {
                if (xmlHttp.readyState == 4) {
                    console.info(xmlHttp.responseText);
                }
            };
            xmlHttp.open("GET", "http://www.jianggujin.com/web/cd", true);
            xmlHttp.send();
        </script>
    </head>

    <body>
    </body>

</html>

访问页面，浏览器控制台显示如下信息（注：显示新格式可能会不同，以具体环境为准）：
[Web浏览器] "XMLHttpRequest cannot load http://www.jianggujin.com/web/cd. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8020' is therefore not allowed access." /mui/crossdomain.html (0)

这就是跨域导致的问题，同样的地址我们使用浏览器可以直接访问，但是使用ajax请求的时候，由于同源策略就被限制了，请求不被允许。通过错误信息，我们也可以得到一点解决问题的消息，缺少：Access-Control-Allow-Origin头。
在w3c中对该问题也做了描述，并列举了一些头,下述内容摘自原文：

5 Syntax

This section defines the syntax of the new headers this specification introduces. It also provides a short description of the function of each header.

The resource processing model section details how resources are to use these headers in a response. Likewise, the user agent processing model section details how user agents are to use these headers.

The ABNF syntax used in this section is from HTTP/1.1. [HTTP]

HTTP/1.1 is used as ABNF basis to ensure that the new headers have equivalent parsing rules to those introduced in that specification.

HTTP/1.1 currently does not make leading OWS implied in header value definitions but that form is assumed here.

5.1 Access-Control-Allow-Origin Response Header

The Access-Control-Allow-Origin header indicates whether a resource can be shared based by returning the value of the Origin request header, “*”, or “null” in the response. ABNF:

Access-Control-Allow-Origin = “Access-Control-Allow-Origin” “:” origin-list-or-null | “*”
In practice the origin-list-or-null production is more constrained. Rather than allowing a space-separated list of origins, it is either a single origin or the string “null”.

5.2 Access-Control-Allow-Credentials Response Header

The Access-Control-Allow-Credentials header indicates whether the response to request can be exposed when the omit credentials flag is unset. When part of the response to a preflight request it indicates that the actual request can include user credentials. ABNF:

Access-Control-Allow-Credentials: “Access-Control-Allow-Credentials” “:” true
true: %x74.72.75.65 ; “true”, case-sensitive
5.3 Access-Control-Expose-Headers Response Header

The Access-Control-Expose-Headers header indicates which headers are safe to expose to the API of a CORS API specification. ABNF:

Access-Control-Expose-Headers = “Access-Control-Expose-Headers” “:” #field-name
5.4 Access-Control-Max-Age Response Header

The Access-Control-Max-Age header indicates how long the results of a preflight request can be cached in a preflight result cache. ABNF:

Access-Control-Max-Age = “Access-Control-Max-Age” “:” delta-seconds
5.5 Access-Control-Allow-Methods Response Header

The Access-Control-Allow-Methods header indicates, as part of the response to a preflight request, which methods can be used during the actual request.

The Allow header is not relevant for the purposes of the CORS protocol. ABNF:

Access-Control-Allow-Methods: “Access-Control-Allow-Methods” “:” #Method
5.6 Access-Control-Allow-Headers Response Header

The Access-Control-Allow-Headers header indicates, as part of the response to a preflight request, which header field names can be used during the actual request. ABNF:

Access-Control-Allow-Headers: “Access-Control-Allow-Headers” “:” #field-name
5.7 Origin Request Header

The Origin header indicates where the cross-origin request or preflight request originates from. [ORIGIN]

5.8 Access-Control-Request-Method Request Header

The Access-Control-Request-Method header indicates which method will be used in the actual request as part of the preflight request. ABNF:

Access-Control-Request-Method: “Access-Control-Request-Method” “:” Method
5.9 Access-Control-Request-Headers Request Header

The Access-Control-Request-Headers header indicates which headers will be used in the actual >request as part of the preflight request. ABNF:

Access-Control-Request-Headers: “Access-Control-Request-Headers” “:” #field-name

看不懂？不着急，我们急需解决问题，上面的一大串内容的意思就是提供了这些响应头用具解决ajax的跨域问题。当ajax进行跨域访问时，浏览器首先会进行一次OPTION请求判断该请求是否被循序跨域，当响应结果为允许访问时，再进行真正的请求。

下面我们对Servlet进行修改使其允许跨域：

package com.gujin.web;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CrossDomain extends HttpServlet
{
   private static final long serialVersionUID = 1L;

   @Override
   protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
   {
      response.setHeader("Access-Control-Allow-Origin", "*");
      super.service(request, response);
   }

   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
   {
      PrintWriter writer = response.getWriter();
      writer.write("{\"name\":\"jianggujin\"}");
      writer.flush();
      writer.close();
   }

   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
   {
      doGet(request, response);
   }

}

再次打开网页，观察控制台输出：

通过输出，我们发现这时候已经可以正常访问了，这样我们就满足了吗？如果有Cookie之类的信息也可以正常提交吗？我们来继续测试，在此更改服务端代码：

package com.gujin.web;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CrossDomain extends HttpServlet
{
   private static final long serialVersionUID = 1L;

   @Override
   protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
   {
      response.setHeader("Access-Control-Allow-Origin", "*");
      super.service(request, response);
   }

   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
   {
      // 使用Session
      request.getSession();
      Cookie[] cookies = request.getCookies();
      System.out.println("========================================");
      if (cookies != null)
      {
         for (Cookie cookie : cookies)
         {
            System.out.println(cookie.getName() + "=" + cookie.getValue());
         }
      }
      PrintWriter writer = response.getWriter();
      writer.write("{\"name\":\"jianggujin\"}");
      writer.flush();
      writer.close();
   }

   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
   {
      doGet(request, response);
   }

}

我们先用浏览器直接访问地址，访问两次，观察控制台输出：

然后我们在通过网页访问看看结果：

两次结果对比，我们可以发现，虽然我们解决了跨域，但是Cookie信息并没有提交，当然了我们也是有办法解决的：
服务端：

package com.gujin.web;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CrossDomain extends HttpServlet
{
   private static final long serialVersionUID = 1L;

   @Override
   protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
   {
      // 不可以直接使用*
      response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:8020");
      response.setHeader("Access-Control-Allow-Credentials", "true");
      super.service(request, response);
   }

   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
   {
      // 使用Session
      request.getSession();
      Cookie[] cookies = request.getCookies();
      System.out.println("========================================");
      if (cookies != null)
      {
         for (Cookie cookie : cookies)
         {
            System.out.println(cookie.getName() + "=" + cookie.getValue());
         }
      }
      PrintWriter writer = response.getWriter();
      writer.write("{\"name\":\"jianggujin\"}");
      writer.flush();
      writer.close();
   }

   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
   {
      doGet(request, response);
   }

}

网页：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>跨域测试</title>
        <script type="text/javascript">
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.onreadystatechange = function() {
                if (xmlHttp.readyState == 4) {
                    console.info(xmlHttp.responseText);
                }
            };
            //设置为true
            xmlHttp.withCredentials = true;
            xmlHttp.open("GET", "http://www.jianggujin.com/web/cd", true);
            xmlHttp.send();
        </script>
    </head>

    <body>
    </body>

</html>

这个时候我们再访问网页就会达到我们想要的结果了。
到这里，我们基本上就解决了跨域的问题了，在实际应用中，我们可能还会遇到其他的问题，比如请求头不允许跨域等，解决方法都是类似的，我们只要添加相应的头信息就可以了，因为测试的原因，响应头信息我是直接放在了Servlet中进行处理，在实际应用中，这样做就很麻烦了，我们可以编写一个过滤器用于跨域访问，在这里就不贴代码了，大家可以自己思考，对该问题进行为你善解决。

时间： 2024-04-26 12:32:38

Ajax跨域访问的相关文章

支持Ajax跨域访问ASP.NET Web Api 2(Cors)的示例教程_实用技巧

随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Angularjs的框架来做UI,而数据则由另一个Web Api 的网站项目来支撑.注意,这里是两个Web网站项目了,前端项目主要负责界面的呈现和一些前端的相应业务逻辑处理,而Web Api则负责提供数据. 这样问题就来了,如果前端通过ajax访问Web Api项目话,就涉及到跨域了.我们知道,如果直接访问,正常情况下Web Api是不允许这样做的,这涉及到安全问题.所以,今天我们这篇文章的主

jquery ajax 跨域访问问题

问题描述 jquery ajax 跨域访问问题 客户端静态页面中使用jquery的ajax,访问同一个局域网内的服务器IIS部署的服务webservice. 访问失败,好像是跨域的问题.但是使用jsonp也有问题,jsonp只能GET,传递的参数长度收限制. 这种情况怎么解决,哪位大侠SOS

浅析JSONP解决Ajax跨域访问问题的思路详解_AJAX相关

前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响应,怎么回事?代码没怎么改动,唯一修改的地方就是jQuery的ajax方法中的url地址.难道是这里的问题,经过检查和调试,发现原来是同源策略在作怪,我们知道,JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术.在JavaScript中,有一个很重要

JSONP跨域GET请求解决Ajax跨域访问问题_json

前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响应,怎么回事?代码没怎么改动,唯一修改的地方就是jQuery的ajax方法中的url地址.难道是这里的问题,经过检查和调试,发现原来是同源策略在作怪,我们知道,JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术.在JavaScript中,有一个很重要

ajax跨域访问报错501的解决方法_AJAX相关

问题:ajax跨域访问报错501 运行下面的代码会报错501 $.ajax({ type: "POST", url: "http://192.168.1.202/sensordata.php", contentType:'application/json; charset=utf-8', data: JSON.stringify(ajaxPostData), dataType:'json', success: function(data){ //On ajax su

Ajax跨域访问Cookie丢失问题的解决方法

ajax跨域访问,可以使用jsonp方法或设置Access-Control-Allow-Origin实现,关于设置Access-Control-Allow-Origin实现跨域访问可以参考之前我写的文章<ajax 设置Access-Control-Allow-Origin实现跨域访问> 1.ajax跨域访问,cookie丢失 首先创建两个测试域名 a.fdipzone.com 作为客户端域名 b.fdipzone.com 作为服务端域名 测试代码 setcookie.PHP 用于设置服务端co

ajax跨域访问-ajax的跨域访问快递接口

问题描述 ajax的跨域访问快递接口 访问一个快递查询接口:html如下: <!DOCTYPE html><html><head><meta charset=""UTF-8""><title>Insert title here</title><script type=""text/javascript"" src=""js/jqu

jquery ajax跨域访问怎么修改header中的referer的值

问题描述 jqueryajax跨域访问怎么修改header中的referer的值:$.ajax({type:"get",url:"http://api.sceea.cn/Handler/GetSpcjkHandler.ashx",data:data,dataType:'jsonp',jsonp:'jsoncallback',beforeSend:function(xhr){//beforeSend定义全局变量xhr.setRequestHeader("Re

使用JSONP解决Ajax跨域访问问题

前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现方法有多种,本例采用 jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响应,怎么回事?代码没怎么改动,唯一修改的地方就是jQuery的ajax方法中的url地址.难道是这里的问题,经过检查和调试,发现原来是同源策略在作怪,我们知道,JavaScript 或jQuery是在Web前端开发中经常使用的动态脚本技术.在JavaScript中,有一个很