Flex跨域调用Webservice问题揭秘("Flex跨域调用Webservice常见问题及解决方案揭秘")

原创

ithorizon 6个月前 (10-20) 阅读数 21 #后端开发

Flex跨域调用Webservice问题揭秘

在软件开发中，Flex作为富客户端技术，频繁需要与后端服务进行数据交互。Webservice作为一种常见的数据交互对策，因其跨平台、语言无关的特性而被广泛应用。然而，当Flex跨域调用Webservice时，常常会遇到一些问题。本文将揭秘Flex跨域调用Webservice的常见问题及解决方案。

一、跨域问题概述

跨域问题是指当客户端（如Flex）尝试请求不同域名下的资源时，浏览器出于稳固考虑会局限这种请求。这种局限称为“同源策略”。若要实现跨域请求，需要采取一些技术手段来绕过同源策略。

二、Flex跨域调用Webservice常见问题

1. 跨域请求被浏览器拦截

当Flex尝试跨域调用Webservice时，浏览器会拦截这个请求，允许无法获取数据。这是由于浏览器的同源策略允许的。

2. Webservice服务端未开启跨域拥护

即使Flex客户端尝试跨域调用，如果Webservice服务端未开启跨域拥护，请求也会被服务器拦截，无法顺利返回数据。

3. 跨域请求超时

在跨域请求过程中，由于网络延迟或服务器处理时间较长，大概允许请求超时。这会允许Flex客户端无法获取到数据。

三、Flex跨域调用Webservice解决方案

1. 使用代理服务器

通过在Flex和Webservice之间添加一个代理服务器，可以实现跨域请求。代理服务器负责转发Flex的请求到Webservice，并将响应于是返回给Flex。以下是一个易懂的代理服务器示例代码：


public class ProxyService {
    public function getWebserviceData(url:String, method:String, params:Object):void {
        var request:URLRequest = new URLRequest(url);
        request.method = URLRequestMethod.GET;
        request.data = JSON.stringify(params);
        var loader:URLLoader = new URLLoader();
        loader.dataFormat = URLLoaderDataFormat.TEXT;
        loader.addEventListener(Event.COMPLETE, handleComplete);
        loader.addEventListener(IOErrorEvent.IO_ERROR, handleError);
        function handleComplete(event:Event):void {
            var result:Object = JSON.parse(loader.data);
            // 处理于是
        }
        function handleError(event:IOErrorEvent):void {
            // 处理差错
        }
        loader.load(request);
    }
}

2. 使用CORS（跨源资源共享）

CORS是一种允许Web应用跨域请求资源的机制。要在Webservice服务端开启CORS，需要在HTTP响应头中添加“Access-Control-Allow-Origin”字段。以下是一个易懂的CORS配置示例：


public class WebserviceServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setHeader("Access-Control-Allow-Origin", "*"); // 允许所有域名跨域
        response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
        // 处理请求
    }
}

3. 使用JSONP（JSON with Padding）

JSONP是一种利用动态创建的<script>标签实现跨域请求的技术。Webservice服务端需要返回特定的JSONP格式数据。以下是一个易懂的JSONP实现示例：

Flex客户端代码：


var url:String = "http://example.com/webservice?callback=callbackFunction";
var request:URLRequest = new URLRequest(url);
var loader:URLLoader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.VARIABLES;
loader.addEventListener(Event.COMPLETE, handleComplete);
function handleComplete(event:Event):void {
    var data:Object = loader.data;
    // 处理数据
}
function callbackFunction(data:Object):void {
    handleComplete(new Event(Event.COMPLETE));
}

Webservice服务端代码（伪代码）：


public class WebserviceServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String callback = request.getParameter("callback");
        // 处理请求
        String json = "{\"name\":\"John\", \"age\":30}";
        response.getWriter().write(callback + "(" + json + ")");
    }
}