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

Question

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

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

当我运行 Mule 处于调试模式时，并不是每次都从 UI 收到 HTTP POST 请求，大多数情况下我必须运行 3客户订单步骤两次以查看 POST 请求触发创建订单工作流，该工作流在触发时似乎已成功完成。每次 POST 调用在 Chrome DevTools 中显示为已取消。

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

我不确定作为 CORS 过程的一部分发送的 OPTIONS 消息是否没有触发 POST 因为 Mule 代码中的某些东西以及它第二次工作的原因是因为 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 调用中将请求 Headers 显示为临时请求，它显示为已取消，即使有时请求会被 Mule 接收并正确处理。

HTTP POST 调用 angularjs 代码：

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>

EDIT OP 还必须从他的 $http 电话中删除 Content-type header，这就是所有评论的内容.

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

HTTP POST request message is not received every time in Mulle when using CORS

cross-domain

mule

cors

angularjs

anypoint-studio