Question

我有一组用Angularjs编写的UI屏幕，它们逐步完成示例客户订单得到客户 2.获得产品 3.创建订单

UI和Mule配置为跨源资源共享（CORS），HTTP GET调用正常工作但HTTP POST请求在Chrome DevTools网络控制台中显示为错误并已取消。

当我在调试模式下运行Mule时，每次都不会从UI接收HTTP POST请求，并且通常我必须运行3个客户订单步骤两次才能看到POST请求触发创建订单工作流程，该工作流程似乎已完成触发后成功。每次虽然POST调用在Chrome DevTools中显示为已取消。

有谁知道可能导致此行为的原因以及如何让POST消息每次都触发Mule工作流程？

我不确定作为CORS过程的一部分发送的OPTIONS消息是否因为Mule代码中的某些内容而没有触发POST以及它第二次工作的原因是因为OPTIONS应答已被缓存，所以它直接发送POST请求或是否还有其他内容。

XML流程：

<?xml version="1.0" encoding="UTF-8"?>
<mule xmlns:tracking="http://www.mulesoft.org/schema/mule/ee/tracking" xmlns:doc="http://www.mulesoft.org/schema/mule/documentation" xmlns="http://www.mulesoft.org/schema/mule/core" xmlns:cors="http://www.mulesoft.org/schema/mule/cors" xmlns:apikit="http://www.mulesoft.org/schema/mule/apikit" xmlns:http="http://www.mulesoft.org/schema/mule/http" xmlns:spring="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.mulesoft.org/schema/mule/core http://www.mulesoft.org/schema/mule/core/current/mule.xsd
http://www.mulesoft.org/schema/mule/cors http://www.mulesoft.org/schema/mule/cors/current/mule-cors.xsd
http://www.mulesoft.org/schema/mule/http http://www.mulesoft.org/schema/mule/http/current/mule-http.xsd
http://www.mulesoft.org/schema/mule/apikit http://www.mulesoft.org/schema/mule/apikit/current/mule-apikit.xsd
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.1.xsd
http://www.mulesoft.org/schema/mule/ee/tracking http://www.mulesoft.org/schema/mule/ee/tracking/current/mule-tracking-ee.xsd">
    <apikit:config name="test-order-config" raml="test-order.raml" consoleEnabled="true" consolePath="console" doc:name="Router">
        <apikit:flow-mapping resource="/orders/order" action="post" content-type="application/json" flow-ref="post:/orders/order:test-order-config"/>    
    </apikit:config>

    <cors:config name="Cors_Configuration" doc:name="Cors Configuration">
        <cors:origins>
            <cors:origin url="*">
                <cors:methods>
                    <cors:method>POST</cors:method>
                    <cors:method>DELETE</cors:method>
                    <cors:method>PUT</cors:method>
                    <cors:method>GET</cors:method>
                    <cors:method>OPTIONS</cors:method>
                </cors:methods>
                <cors:headers>
                    <cors:header>Content-Type</cors:header>
                </cors:headers>
            </cors:origin>
        </cors:origins>
    </cors:config>

    <flow name="test-order-main">
        <http:listener config-ref="HTTP_Experience_Listener_Configuration" path="/*" doc:name="HTTP"/>
        <cors:validate config-ref="Cors_Configuration" publicResource="true" acceptsCredentials="false" doc:name="CORS Validate"/>
        <apikit:router config-ref="test-order-config" doc:name="APIkit Router"/>               
        <exception-strategy ref="test-order-apiKitGlobalExceptionMapping" doc:name="Reference Exception Strategy"/>
    </flow>

    <flow name="set-access-control-allow">
        <set-property propertyName="Access-Control-Allow-Origin" value="*" doc:name="Set Access Control Allow Origin"/>
        <set-property propertyName="Access-Control-Allow-Credentials" value="false" doc:name="Set Access Control Allow Credentials"/>
        <set-property propertyName="Access-Control-Allow-Methods" value="GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS" doc:name="Set Access Control Allow Methods"/>
        <set-property propertyName="Access-Control-Allow-Headers" value="DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,origin,authorization,accept,client-security-token" doc:name="Set Access Control Allow Headers"/>
    </flow>

    <flow name="get:/products:test-order-config">
        <set-payload value="#['{ &quot;getProducts&quot;: { &quot;productsList&quot;: [{ &quot;productId&quot;: &quot;001&quot;, &quot;name&quot;: &quot;test_product1&quot;}]}}']" doc:name="Set Payload"/>
        <flow-ref name="set-access-control-allow" doc:name="set-access-control-allow"/>
        <logger message="#[payload]" level="INFO" doc:name="Logger"/>
    </flow>

    <flow name="get:/customer/{customerId}:test-order-config">
        <set-payload value="#['{&quot;getCustomer&quot;:{&quot;customerId&quot;:&quot;1234567890&quot;,&quot;title&quot;:&quot;MR&quot;,&quot;Name&quot;:&quot;John&quot;}}']" doc:name="Set Payload"/>
        <flow-ref name="set-access-control-allow" doc:name="set-access-control-allow"/>
        <logger message="#[payload]" level="INFO" doc:name="Logger"/>
    </flow>

    <flow name="post:/orders/order:test-order-config">
        <set-payload value="#['{&quot;createOrder&quot;:{&quot;orderId&quot;:&quot;8a493ecd-e842-4ca2-b33b-a03aa9136673&quot;,&quot;success&quot;:true}}']" doc:name="Set Payload"/>
        <flow-ref name="set-access-control-allow" doc:name="set-access-control-allow"/>
        <logger message="#[payload]" level="INFO" doc:name="Logger"/>
    </flow>

    <apikit:mapping-exception-strategy name="test-order-apiKitGlobalExceptionMapping">
        <apikit:mapping statusCode="404">
            <apikit:exception value="org.mule.module.apikit.exception.NotFoundException"/>
            <set-property propertyName="Content-Type" value="application/json" doc:name="Property"/>
            <set-payload value="{ &quot;message&quot;: &quot;Resource not found&quot; }" doc:name="Set Payload"/>
        </apikit:mapping>
        <apikit:mapping statusCode="405">
            <apikit:exception value="org.mule.module.apikit.exception.MethodNotAllowedException"/>
            <set-property propertyName="Content-Type" value="application/json" doc:name="Property"/>
            <set-payload value="{ &quot;message&quot;: &quot;Method not allowed&quot; }" doc:name="Set Payload"/>
        </apikit:mapping>
        <apikit:mapping statusCode="415">
            <apikit:exception value="org.mule.module.apikit.exception.UnsupportedMediaTypeException"/>
            <set-property propertyName="Content-Type" value="application/json" doc:name="Property"/>
            <set-payload value="{ &quot;message&quot;: &quot;Unsupported media type&quot; }" doc:name="Set Payload"/>
        </apikit:mapping>
        <apikit:mapping statusCode="406">
            <apikit:exception value="org.mule.module.apikit.exception.NotAcceptableException"/>
            <set-property propertyName="Content-Type" value="application/json" doc:name="Property"/>
            <set-payload value="{ &quot;message&quot;: &quot;Not acceptable&quot; }" doc:name="Set Payload"/>
        </apikit:mapping>
        <apikit:mapping statusCode="400">
            <apikit:exception value="org.mule.module.apikit.exception.BadRequestException"/>
            <set-property propertyName="Content-Type" value="application/json" doc:name="Property"/>
            <set-payload value="{ &quot;message&quot;: &quot;Bad request&quot; }" doc:name="Set Payload"/>
        </apikit:mapping>
    </apikit:mapping-exception-strategy>

</mule>

Chrome DevTools在POST调用中将请求标头显示为临时显示为已取消，即使有时请求已被Mule接收并正确处理。

angularjs代码中的HTTP POST调用：

postContent: function (link, data) {
            $http({
                method: 'POST',
                url: link,
                headers: {'Content-Type':'application/json'},
                data: angular.toJson(data)
            }).success(function (responseData) {
                //do stuff with response
                var returnData = responseData;
            }).error(function (e) {
                //do stuff with response
                var error = e;
            });
        }

Answer 1

只需在授权请求中添加OPTIONS：

<cors:methods>
    <cors:method>OPTIONS</cors:method>
</cors:methods>

编辑 OP还必须从Content-type来电中删除$http标头，这就是所有评论的内容。

使用CORS时，Mulle中每次都不会收到HTTP POST请求消息

1 个答案: